<!DOCTYPE html>
<html lang="es" xml:lang="es">

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Consolidado Importacion Mexicana - {{ factura.numero }}</title>
    <style type="text/css">
        /* ESTILOS EXACTOS DE SCAPII PARA MANTENER EL FORMATO */
        * {
            margin: 0;
            padding: 0;
            font-family: Tahoma, sans-serif;
            color: black;
        }

        .titulo {
            font-size: 14pt;
            padding: 3pt 0 0 6pt;
        }

        .grande {
            font-size: 13pt;
            padding-left: 5pt;
        }

        .medio-bold {
            font-size: 9pt;
            font-weight: bold;
            padding: 3pt 0 0 3pt;
        }

        .normal {
            font-size: 8pt;
        }

        .small-bold {
            font-size: 8pt;
            font-weight: bold;
        }

        .tiny-bold {
            font-size: 7pt;
            font-weight: bold;
        }

        .tiny {
            font-size: 7pt;
        }

        .mini {
            font-size: 5pt;
        }

        h1 {
            font-weight: bold;
            font-size: 8pt;
        }

        p {
            font-size: 7pt;
        }

        .cliente {
            border-bottom: 1pt solid black;
            text-decoration: none;
            display: block;
            width: 100%
        }

        .center {
            text-align: center;
        }

        .right {
            text-align: right;
        }

        .border {
            border: 1pt solid #808080;
        }

        .p-t-1 {
            padding-top: 1pt;
        }

        .p-t-2 {
            padding-top: 2pt;
        }

        .p-t-3 {
            padding-top: 3pt;
        }

        .p-t-4 {
            padding-top: 4pt;
        }

        .p-t-5 {
            padding-top: 5pt;
        }

        .p-t-8 {
            padding-top: 8pt;
        }

        .p-t-9 {
            padding-top: 9pt;
        }

        .p-l-2 {
            padding-left: 2pt;
        }

        .p-l-3 {
            padding-left: 3pt;
        }

        .p-l-5 {
            padding-left: 5pt;
        }

        .p-l-6 {
            padding-left: 6pt;
        }

        .p-l-7 {
            padding-left: 7pt;
        }

        .p-l-8 {
            padding-left: 8pt;
        }

        .p-l-9 {
            padding-left: 9pt;
        }

        .p-l-10 {
            padding-left: 10pt;
        }

        .p-r-1 {
            padding-right: 1pt;
        }

        .p-r-2 {
            padding-right: 2pt;
        }

        .p-r-4 {
            padding-right: 4pt;
        }

        .p-r-5 {
            padding-right: 5pt;
        }

        .p-r-9 {
            padding-right: 9pt;
        }

        .p-b-1 {
            padding-bottom: 1pt;
        }

        .h-10 {
            height: 10pt;
        }

        .h-11 {
            height: 11pt;
        }

        .h-14 {
            height: 14pt;
        }

        .h-15 {
            height: 15pt;
        }

        .h-18 {
            height: 18pt;
        }

        .h-22 {
            height: 22pt;
        }

        .h-82 {
            height: 82pt;
        }

        .h-384 {
            height: 384pt;
        }

        .line-1 {
            line-height: 1pt;
        }

        .line-7 {
            line-height: 7pt;
        }

        .line-8 {
            line-height: 8pt;
        }

        .line-9 {
            line-height: 9pt;
        }

        .line-10 {
            line-height: 10pt;
        }

        .m-l-3 {
            margin-left: 3pt;
        }

        .m-l-5 {
            margin-left: 5.74pt;
        }

        .flex-container {
            width: 100%;
            overflow: hidden;
        }

        .flex-container-end {
            width: 100%;
            overflow: hidden;
        }

        .width-48 {
            width: 48%;
            float: left;
        }

        .width-48-right {
            width: 48%;
            float: right;
            text-align: right;
        }

        .position-relative-centered {
            position: relative;
            width: 48%;
            float: left;
        }

        .full-width-block {
            display: block;
            width: 100%;
        }

        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        table,
        tbody {
            vertical-align: top;
            overflow: visible;
        }
    </style>
</head>

<body>
    <header>
        <div class="flex-container clearfix">
            <div class="width-48" style="position: relative;">
                <p class="titulo">HTS Code / Fracción Americana <span class="mini">(temporal)</span></p>
                <div class="cliente" style="height: 1px;"></div>
                <p class="cliente p-t-1 p-b-1"></p>
            </div>
            <div class="width-48-right">
                <p class="p-l-5 line-1"><span></span></p>
                <p class="p-t-2"><br></p>
            </div>
        </div>
        <div class="flex-container-end clearfix" style="overflow: visible;">
            <div class="position-relative-centered">
                {% if logo_b64 %}
                <div style="position: absolute; top: 10pt; left: 0;">
                    <img src="{{ logo_b64 }}" style="max-height: 70pt; max-width: 120pt;" />
                </div>
                {% endif %}
                <div style="margin-left: 130pt; padding-top: 25pt; text-align: left;">
                    <h1 class="cliente">{{ cliente_proveedor.header }}</h1>
                    <p>{{ cliente_proveedor.nombre }}</p>
                    <p>{{ cliente_proveedor.direccion }}
                        {% if cliente_proveedor.num_exterior %} Ext: {{ cliente_proveedor.num_exterior }}{% endif %}
                        {% if cliente_proveedor.num_interior %} Int: {{ cliente_proveedor.num_interior }}{% endif %}
                    </p>
                    <p>{{ cliente_proveedor.colonia }} {% if cliente_proveedor.codigo_postal %} CP: {{
                        cliente_proveedor.codigo_postal }}{% endif %}</p>
                    <p>{{ cliente_proveedor.ciudad }}, {{ cliente_proveedor.estado }}, {{ cliente_proveedor.pais }}</p>
                    <p>TAX ID: {{ cliente_proveedor.tax_id }}
                        {% if cliente_proveedor.programa and cliente_proveedor.programa != 'Ninguno' %}
                        {{ cliente_proveedor.programa }}: {{ cliente_proveedor.autorizacion }}
                        {% endif %}
                    </p>
                    <p><br></p>
                </div>
            </div>

            <div style="position: relative;">
                <table cellspacing="0" class="m-l-3" style="float: right; text-align: left; width: 230pt;">
                    <tbody>
                        <tr class="h-18">
                            <td bgcolor="#E4E4E4" class="border" colspan="2" style="width:90pt">
                                <p class="medio-bold p-l-3">Invoice No.:</p>
                            </td>
                            <td class="border" colspan="2" style="width:140pt">
                                <p class="grande center">{{ factura.numero }}</p>
                            </td>
                        </tr>
                        <tr class="h-18">
                            <td bgcolor="#E4E4E4" class="border" style="width:35pt">
                                <p class="medio-bold p-l-2 line-9">Date:</p>
                            </td>
                            <td class="border" style="width:65pt">
                                <p class="normal center line-9">{{ factura.fecha }}</p>
                            </td>
                            <td bgcolor="#E4E4E4" class="border" style="width:35pt">
                                <p class="medio-bold p-l-2 line-9">Rate:</p>
                            </td>
                            <td class="border" style="width:65pt">
                                <p class="normal center line-9">{{ factura.tipo_cambio }}</p>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <!-- Transporter Info Block (Clarion Adaptation) -->
                <div
                    style="float: right; width: 230pt; margin-top: 5pt; border: 1px solid black; padding: 2pt; margin-left: 10pt;">
                    <p class="medio-bold">Coveyance Co. / Cia. Transportista:</p>
                    <p class="normal line-9" style="white-space: pre-line;">{{ factura.transportista_info }}</p>
                </div>
            </div>
        </div>

        <div class="flex-container clearfix">
            <div class="width-48">
                <h1 class="p-t-5 p-l-5 line-10 cliente">{{ cliente_vendido.header }}</h1>
                <p class="p-l-5 line-8">{{ cliente_vendido.nombre }}</p>
                <p class="p-l-5">{{ cliente_vendido.direccion }}
                    {% if cliente_vendido.num_exterior %} Ext: {{ cliente_vendido.num_exterior }}{% endif %}
                    {% if cliente_vendido.num_interior %} Int: {{ cliente_vendido.num_interior }}{% endif %}
                </p>
                <p class="p-l-5">{{ cliente_vendido.colonia }} {% if cliente_vendido.codigo_postal %} CP: {{
                    cliente_vendido.codigo_postal }}{% endif %}</p>
                <p class="p-l-5">{{ cliente_vendido.ciudad }}, {{ cliente_vendido.estado }}, {{ cliente_vendido.pais }}
                </p>
                <p class="p-l-5">RFC: {{ cliente_vendido.tax_id }}
                    {% if cliente_vendido.programa and cliente_vendido.programa != 'Ninguno' %}
                    {{ cliente_vendido.programa }}: {{ cliente_vendido.autorizacion }}
                    {% endif %}
                </p>
                <p class="p-l-5">
                    {% if cliente_vendido.prosec %}PROSEC: {{ cliente_vendido.prosec }} {% endif %}
                    {% if cliente_vendido.reg_emp %}REG EMP: {{ cliente_vendido.reg_emp }} {% endif %}
                    {% if cliente_vendido.cert %}CERT: {{ cliente_vendido.cert }}{% endif %}
                </p>
            </div>

            <div class="width-48-right" style="text-align: left;">
                <h1 class="p-t-5 p-l-5 line-10 cliente full-width-block">{{ cliente_enviado.header }}</h1>
                <p class="p-l-5 line-8">{{ cliente_enviado.nombre }}</p>
                <p class="p-l-5">{{ cliente_enviado.direccion }}
                    {% if cliente_enviado.num_exterior %} Ext: {{ cliente_enviado.num_exterior }}{% endif %}
                    {% if cliente_enviado.num_interior %} Int: {{ cliente_enviado.num_interior }}{% endif %}
                </p>
                <p class="p-l-5">{{ cliente_enviado.colonia }} {% if cliente_enviado.codigo_postal %} CP: {{
                    cliente_enviado.codigo_postal }}{% endif %}</p>
                <p class="p-l-5">{{ cliente_enviado.ciudad }}, {{ cliente_enviado.estado }}, {{ cliente_enviado.pais }}
                </p>
                <p class="p-l-5">RFC: {{ cliente_enviado.tax_id }}
                    {% if cliente_enviado.programa and cliente_enviado.programa != 'Ninguno' %}
                    {{ cliente_enviado.programa }}: {{ cliente_enviado.autorizacion }}
                    {% endif %}
                </p>
                <p class="p-l-5">
                    {% if cliente_enviado.prosec %}PROSEC: {{ cliente_enviado.prosec }} {% endif %}
                    {% if cliente_enviado.reg_emp %}REG EMP: {{ cliente_enviado.reg_emp }} {% endif %}
                    {% if cliente_enviado.cert %}CERT: {{ cliente_enviado.cert }}{% endif %}
                </p>
            </div>
        </div>
        <p class="p-t-8"><br /></p>
    </header>

    <table cellspacing="0" class="m-l-5" style="width: 99%; max-width: 580pt;">
        <thead>
            <tr class="h-10">
                <td class="border" style="width:15%">
                    <p class="tiny-bold center p-t-3">HTS Code / Fracción Americana <span class="mini">(temporal)</span>
                    </p>
                </td>
                <td class="border" style="width:10%">
                    <p class="tiny-bold center p-t-3">Country</p>
                </td>
                <td class="border" style="width:10%">
                    <p class="tiny-bold center p-t-3">Comm. Qty</p>
                </td>
                <td class="border" style="width:5%">
                    <p class="tiny-bold center p-t-3">Unit</p>
                </td>
                <td class="border" colspan="2" style="width:15%">
                    <p class="tiny-bold center line-9">Weight (KGS)</p>
                    <div class="clearfix">
                        <div class="width-48" style="width: 50%; text-align: center;">
                            <p class="mini">Net</p>
                        </div>
                        <div class="width-48-right" style="width: 50%; text-align: center;">
                            <p class="mini">Gross</p>
                        </div>
                    </div>
                </td>
                <td class="border" colspan="2" style="width:25%">
                    <p class="tiny-bold center line-9">Dutiable Values</p>
                    <div class="clearfix">
                        <div class="width-48" style="width: 50%; text-align: center;">
                            <p class="mini">Unit</p>
                        </div>
                        <div class="width-48-right" style="width: 50%; text-align: center;">
                            <p class="mini">Totals</p>
                        </div>
                    </div>
                </td>
                <td class="border" style="width:5%">
                    <p class="tiny-bold center p-t-3">Rate</p>
                </td>
                <td class="border" style="width:15%">
                    <p class="tiny-bold center p-t-3">Est. Duties</p>
                </td>
            </tr>
        </thead>

        <tbody class="h-384" style="width: 100%;">
            {% for partida in partidas %}
            <tr>
                <td class="border">
                    <p class="mini p-t-2 center">{{ partida.fraccion }}</p>
                </td>
                <td class="border">
                    <p class="mini p-t-2 center">{{ partida.origen or 'MEX' }}</p>
                </td>
                <td class="border">
                    <p class="mini p-t-2 center">{{ partida.cantidad_importacion }}</p>
                </td>
                <td class="border">
                    <p class="mini p-t-2 center">{{ partida.unidad_medida }}</p>
                </td>
                <td class="border" style="border-right: 0;">
                    <p class="mini p-t-2 center">{{ partida.peso_neto }}</p>
                </td>
                <td class="border" style="border-left: 0;">
                    <p class="mini p-t-2 center">{{ partida.peso_bruto }}</p>
                </td>
                <td class="border" style="border-right: 0;">
                    <p class="mini p-t-2 center">${{ partida.valor_costo_unitario }}</p>
                </td>
                <td class="border" style="border-left: 0;">
                    <p class="mini p-t-2 center">${{ partida.valor_total }}</p>
                </td>
                <td class="border">
                    <p class="mini p-t-2 center">{{ partida.advalorem }}</p>
                </td>
                <td class="border">
                    <p class="mini p-t-2 right p-r-2">${{ partida.valor_estimado }}</p>
                </td>
            </tr>
            {% endfor %}
        </tbody>

        <tfoot>
            <tr class="h-14">
                <td bgcolor="#E4E4E4" class="border" colspan="2" style="width:25%">
                    <p class="small-bold p-t-2 p-l-3 line-10">
                        <span>TOTALS</span>
                    </p>
                </td>
                <td class="border" style="width:10%">
                    <p class="tiny p-t-5 center line-8">{{ totales.cantidad_total }}</p>
                </td>
                <td class="border" style="width:5%">
                    <p class="tiny p-t-4 center line-8">
                        {% if totales.bultos_total != 0 %}{{ totales.bultos_total }}{% endif %}
                        <span>{{ totales.clave_bultos or '' }}</span>
                    </p>
                </td>
                <td class="border" style="width:7.5%">
                    <p class="tiny p-t-5 center line-8">{{ totales.peso_neto_total }}</p>
                </td>
                <td class="border" style="width:7.5%">
                    <p class="tiny p-t-5 center line-8">{{ totales.peso_bruto_total }}</p>
                </td>
                <td class="border" style="width:12.5%">
                    <!-- Unitario Total N/A -->
                </td>
                <td class="border" style="width:12.5%">
                    <p class="tiny p-t-5 right line-8 p-r-2">${{ totales.valor_total_total }}</p>
                </td>
                <td class="border" style="width:5%">
                    <!-- Tasa N/A -->
                </td>
                <td class="border" style="width:15%">
                    <p class="tiny p-t-5 right p-r-2">${{ totales.valor_estimado_total }}</p>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="border" style="height: 100pt; text-align:start; vertical-align: top;">
                    <p class="mini p-l-2 p-t-2">{{ factura.observaciones }}</p>
                </td>
                <td colspan="8" style="width:80%; vertical-align: bottom; height: 100%;">
                    <p style="border-bottom: 1pt solid black; width: 80%; margin: 60pt auto 2pt auto;"></p>
                    <p class="normal center" style="margin-bottom: 0;">{{ factura.representante_legal }}</p>
                    <p class="normal center" style="margin-bottom: 0;">{{ factura.nombre_empresa }}</p>
                    <p style="margin-bottom: 0;"><br /></p>
                </td>
            </tr>
            <tr>
                <td colspan="10" style="width:100%; vertical-align: top; height: 100%;">
                    <p class="p-t-8"><br /></p>
                    <p class="p-l-5 line-8 tiny-bold">Normal Por Parte</p>
                    <p class="normal p-l-5 line-9">I declare under penalty of perjury that the information contained in
                        this document is true and I am responsible for proving what is declared here.</p>
                </td>
            </tr>
        </tfoot>
    </table>
</body>

</html>