<style>
    span {
        color: #000;
    }
    p {
        font-family: sans-serif, verdana, arial;
        color: #124a9c;
        font-size: 18px;
        line-height: 2;
        margin-top: -10px;
    }
    .folio {
        background-color: #124a9c;
        font-size: 22px;
        color: #FFFFFF;
        font-family: sans-serif, verdana, arial;
        font-weight: bold;
        padding: 3px 30px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .control {
        font-size: 22px;
        color: #FF0000;
        font-weight: bold;
    }
    #marca-agua {
        position: fixed;
        top: 12%;
        left: 8%;
        width: 577px;
        height: 450px;
        z-index: -1000;
        opacity: 0.12;
    }
    #marca-agua img {
        width: 577px;
        height: 450px;
    }
    .titulo {
        pago.monto
    }
    .titulo {
        text-align: center;
        font-size: 20px;
        margin-bottom: 40px;
    }
    .contenido {
        text-align: justify;
    }
    .pie {
        text-align: center;
    }
    .encabezado {
        width: 100%;
        margin-bottom: 120px;
    }
    .tope-left {
        width: 50%;
        text-align: left;
        float: left;
    }
    .tope-right {
        width: 50%;
        text-align: right;
        float: right;
    }
    .dimension-imagen {
        width: 200px;
        height: auto;
    }
</style>

<div id="marca-agua"><img src="{{ canvasBase64 }}" alt="Marca de agua"></div>

<div class="encabezado">
    <div class="tope-left">
        <img src="{{ imageBase64 }}" alt="Imagen" class="dimension-imagen">
    </div>
    <div class="tope-right">
        <span class="folio">FOLIO:</span><br /><br /><span class="control">Nº {{ pago.numeroRecibo }}</span>
    </div>
</div>

<p class="titulo"><b>RECIBO DE PAGO</b></p>

<p class="contenido"><b>LUGAR Y FECHA DE EXPEDICIÓN:</b></p>
<p class="contenido"><b>EN</b> <span>CIUDAD JUÁREZ, CHIHUAHUA</span> <b>A</b> <span>{{ pago.fecha|date('d') }}</span> <b>DE</b> <span>{{ dateToWords.toMonth(pago.fecha) }}</span> <b>DE</b> <span>{{ pago.fecha|date('Y') }}</span>.</p>
<p class="contenido"><b>RECIBÍ DE:</b> <span>{{ cliente.nombres ~ ' ' ~ cliente.apellidos|e }}</span> <b>LA CANTIDAD DE:</b> <span>$ {{ pago.monto|number_format(2, '.', ',') }}</span>.</p>
<p class="contenido"><b>Cantidad con letras:</b> <span>{{ numberToAmounts.amountWithDecimals(pago.monto) }}</span>.</p>
<p class="contenido"><b>POR CONCEPTO DE:</b> <span>PAGO DE MESUALIDAD MANZANA {{ manzana.nombre }}, LOTE {{ lote.nombre }}</span>.</p>
{#
    <br /><br /><br />
    <p class="pie"><b>REPRESENTANTE DE EMMA INMOBILIARIA</b></p>
    <br />
    <p class="pie"><span>{{ vendedor.nombres ~ ' ' ~ vendedor.apellidos }}</span></p>
#}