<style>
    span {
        color: #000;
    }
    p.titulo {
        font-family: sans-serif, verdana, arial;
        color: #124a9c;
        background: #b1b1b1;
        font-size: 18px;
        line-height: 2;
        text-align: left;
        margin-top: 30px;
        padding: -3px 0 5px 10px; /* top, right, bottom, left */
    }
    p.datos {
        font-family: sans-serif, verdana, arial;
        color: #000000;
        font-size: 18px;
        text-align: left;
        line-height: 0.7;
    }
    #marca-agua {
        position: fixed;
        top: 21%;
        left: 0;
        width: 705px;
        height: 550px;
        z-index: -1000;
        opacity: 0.12;
    }
    #marca-agua img {
        width: 705px;
        height: 550px;
    }
    .encabezado {
        text-align: center;
        font-size: 20px;
        margin-bottom: 40px;
        font-family: sans-serif, verdana, arial;
    }
    .caja-imagen {
        width: 100%;
        text-align: left;
    }
    .dimension-imagen {
        width: 200px;
        height: auto;
    }
</style>

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

<div class="caja-imagen">
    <img src="{{ imageBase64 }}" alt="Imagen" class="dimension-imagen">
</div>

<p class="encabezado">
    <b>ESTADO DE CUENTA</b>
</p>

<p class="titulo"><b>INFORMACIÓN DE PAGO</b></p>
<p class="datos"><b>Monto de las cuotas: </b> $ {{ estado.montoCuota|number_format(2, '.', ',') }}</p>
<p class="datos"><b>Cuotas totales: </b> {{ estado.cuotasTotales }}</p>
<p class="datos"><b>Cuotas pagadas: </b> {{ estado.cuotasPagadas }}</p>
<p class="datos"><b>Cuotas vencidas: </b> {{ estado.cuotasVencidas }}</p>
<p class="datos"><b>Cuotas pendientes: </b> {{ estado.cuotasPendientes }}</p>
<p class="datos"><b>Monto pagado: </b> $ {{ estado.montoPagado|number_format(2, '.', ',') }}</p>
<p class="datos">
    <b>Monto por pagar: </b>
    {% if estatus.id == 7 %}
        $ {{ 0|number_format(2, '.', ',') }}
    {% else %}
        $ {{ estado.montoPorPagar|number_format(2, '.', ',') }}
    {% endif %}
</p>

<p class="titulo"><b>RESUMEN DE VENTA</b></p>
<p class="datos"><b>Número de contrato: </b> {{ venta.numeroContrato }}</p>
<p class="datos">
    <b>Fecha de firma: </b>
    {% if estado.fechaFirma is empty %}
        Por firmar
    {% else %}
        {{ estado.fechaFirma|date('d/m/Y') }}
    {% endif %}
</p>
<p class="datos"><b>Estatus del contrato: </b> {{ estatus.descripcion|e }}</p>
<p class="datos"><b>Lote - Manzana: </b> {{ lote.nombre }}-{{ manzana.nombre }}</p>
<p class="datos"><b>Precio del lote: </b> $ {{ estado.montoLote|number_format(2, '.', ',') }}</p>
<p class="datos"><b>Anticipo: </b> $ {{ estado.montoAnticipo|number_format(2, '.', ',') }}</p>

{% if estado.tieneCabana == 'SI' %}
    <p class="datos"><b>Precio cabaña: </b> $ {{ estado.montoCabana|number_format(2, '.', ',') }}</p>
{% endif %}

<p class="datos"><b>Precio total venta: </b> $ {{ estado.montoTotal|number_format(2, '.', ',') }}</p>

<p class="titulo"><b>INFORMACIÓN DEL CLIENTE</b></p>
<p class="datos"><b>Cliente: </b> {{ cliente.nombres|e }} {{ cliente.apellidos }}</p>
<p class="datos">
    {% if cliente.curp is empty %}
        <b>Pasaporte: </b> {{ cliente.pasaporte }}
    {% else %}
        <b>CURP: </b> {{ cliente.curp }}
    {% endif %}
</p>
<p class="datos"><b>Nacionalidad: </b> {{ pais.gentilicio|e }}</p>
<p class="datos"><b>Teléfono celular: </b> {{ cliente.celular }}</p>
<p class="datos"><b>Correo electrónico: </b> {{ cliente.correo|lower }}</p>