República Dominicana

Hogarium Real Estate

hogariumrd.com

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Recibo Profesional Multi-Moneda</title>
    <style>
        :root {
            --primary: #1e293b;
            --accent: #2563eb;
            --success: #10b981;
            --danger: #ef4444;
        }
        body {
            font-family: 'Inter', 'Segoe UI', sans-serif;
            background: #f1f5f9;
            padding: 40px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .recibo {
            width: 750px;
            background: #fff;
            padding: 50px;
            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
            border-radius: 8px;
            position: relative;
        }
        .no-print { margin-bottom: 20px; display: flex; gap: 10px; align-items: center; }
        
        button {
            cursor: pointer;
            padding: 10px 20px;
            border-radius: 6px;
            border: none;
            font-weight: 600;
            transition: all 0.2s;
        }
        .btn-pdf { background: var(--accent); color: white; }
        .btn-add { background: var(--success); color: white; margin-top: 15px; font-size: 0.9em; }
        .btn-del { background: var(--danger); color: white; padding: 4px 8px; font-size: 10px; }
        
        .currency-selector {
            padding: 10px;
            border-radius: 6px;
            border: 2px solid var(--accent);
            font-weight: bold;
            color: var(--accent);
        }

        header {
            display: flex;
            justify-content: space-between;
            border-bottom: 3px solid var(--primary);
            padding-bottom: 20px;
            margin-bottom: 40px;
        }

        .seccion { margin-bottom: 25px; display: flex; align-items: center; }
        .seccion strong { width: 140px; color: #475569; font-size: 0.9em; text-transform: uppercase; }
        
        .input-libre {
            flex: 1;
            border: none;
            border-bottom: 1px solid #cbd5e1;
            padding: 5px;
            font-size: 1.1em;
            outline: none;
        }
        .input-libre:focus { border-bottom: 2px solid var(--accent); }

        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th { text-align: left; background: #f8fafc; padding: 12px; border-bottom: 2px solid #333; }
        td { padding: 12px; border-bottom: 1px solid #f1f5f9; }

        .monto-celda { text-align: right; width: 160px; font-weight: bold; font-size: 1.1em; }
        .editable { outline: none; display: block; width: 100%; min-height: 1.2em; }
        .editable:focus { background: #f0f7ff; }

        .total-box {
            margin-top: 40px;
            padding: 20px;
            background: #f8fafc;
            text-align: right;
            border-radius: 8px;
        }
        .total-label { font-size: 1.2em; color: #64748b; margin-right: 10px; }
        .total-monto { font-size: 2.2em; color: var(--primary); font-weight: 800; }

        footer {
            margin-top: 80px;
            display: flex;
            justify-content: center;
        }
        .firma-container { width: 280px; text-align: center; }
        .linea-firma { border-top: 1px solid #333; margin-bottom: 10px; }

        @media print {
            .no-print { display: none !important; }
            body { background: white; padding: 0; }
            .recibo { box-shadow: none; border: none; width: 100%; padding: 20px; }
            .input-libre { border: none; }
            .currency-selector { border: none; appearance: none; -webkit-appearance: none; color: black; }
        }
    </style>
</head>
<body>

    <div class="no-print">
        <select id="moneda" class="currency-selector" onchange="calcularTotal()">
            <option value="RD$">Peso Dominicano (RD$)</option>
            <option value="US$">Dólar Americano (US$)</option>
        </select>
        <button class="btn-pdf" onclick="window.print()">GUARDAR COMO PDF</button>
    </div>

    <div class="recibo">
        <header>
            <div>
                <h1 style="margin:0; letter-spacing: -1px;">RECIBO DE PAGO</h1>
                <p contenteditable="true" style="color: var(--accent); font-weight: bold;">#2026-001</p>
            </div>
            <div style="text-align: right">
                <p style="margin:0; color: #64748b;">FECHA</p>
                <p contenteditable="true" style="margin:0; font-weight: bold;">19 de Febrero, 2026</p>
            </div>
        </header>

        <div class="seccion">
            <strong>Emisor:</strong>
            <input list="emisores" class="input-libre" placeholder="Seleccione nombre...">
            <datalist id="emisores">
                <option value="LEONEL DE LA CRUZ">
                <option value="LUIS LA PAZ">
                <option value="ALEX DE LA CRUZ">
                <option value="LUIS MEJIA">
                <option value="ELIZABETH MENA">
                <option value="JOSE LUIS RIVERA">
                <option value="SCARLENT ESPINAL">
                <option value="LISSETTE FELIZ">
            </datalist>
        </div>

        <div class="seccion">
            <strong>Recibido de:</strong>
            <input type="text" class="input-libre" placeholder="Nombre del pagador...">
        </div>

        <table>
            <thead>
                <tr>
                    <th>Descripción del Concepto</th>
                    <th class="monto-celda">Monto</th>
                    <th class="no-print" style="width:40px"></th>
                </tr>
            </thead>
            <tbody id="cuerpo-tabla">
                <tr>
                    <td><span class="editable" contenteditable="true">Servicios profesionales</span></td>
                    <td class="monto-celda">
                        <span class="editable input-monto" contenteditable="true" oninput="calcularTotal()">0.00</span>
                    </td>
                    <td class="no-print"><button class="btn-del" onclick="eliminarFila(this)">✕</button></td>
                </tr>
            </tbody>
        </table>

        <button class="btn-add no-print" onclick="agregarFila()">+ AGREGAR FILA</button>

        <div class="total-box">
            <span class="total-label">VALOR TOTAL</span>
            <span class="total-monto" id="total-display">RD$ 0.00</span>
        </div>

        <footer>
            <div class="firma-container">
                <div class="linea-firma"></div>
                <p style="margin:0; font-weight: bold;">Firma Autorizada</p>
                <p style="margin:0; font-size: 0.8em; color: #64748b;">Sello y Fecha</p>
            </div>
        </footer>
    </div>

    <script>
        function agregarFila() {
            const tbody = document.getElementById('cuerpo-tabla');
            const fila = document.createElement('tr');
            fila.innerHTML = `
                <td><span class="editable" contenteditable="true">Nuevo concepto...</span></td>
                <td class="monto-celda">
                    <span class="editable input-monto" contenteditable="true" oninput="calcularTotal()">0.00</span>
                </td>
                <td class="no-print"><button class="btn-del" onclick="eliminarFila(this)">✕</button></td>
            `;
            tbody.appendChild(fila);
            calcularTotal();
        }

        function eliminarFila(btn) {
            const filas = document.querySelectorAll('#cuerpo-tabla tr');
            if (filas.length > 1) {
                btn.closest('tr').remove();
                calcularTotal();
            }
        }

        function calcularTotal() {
            let sumatoria = 0;
            const montos = document.querySelectorAll('.input-monto');
            const moneda = document.getElementById('moneda').value;
            
            montos.forEach(span => {
                let texto = span.innerText.replace(/[^0-9.]/g, '');
                let valor = parseFloat(texto);
                if (!isNaN(valor)) {
                    sumatoria += valor;
                }
            });

            const totalFormateado = sumatoria.toLocaleString('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });

            document.getElementById('total-display').innerText = `${moneda} ${totalFormateado}`;
        }
    </script>

</body>
</html>