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

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Aviso Consolidado - {{ aviso.pedimento_completo }}</title>
    <style type="text/css">
        /* ESTILOS EXACTOS DE SCAPII (Copiados de tu archivo) */
        * {
            margin: 0;
            padding: 0;
            font-family: Tahoma, sans-serif;
            color: black;
        }

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

        .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;
        }

        .center {
            text-align: center;
        }

        .right {
            text-align: right;
        }

        .left {
            text-align: left;
        }

        .border {
            border: 1pt solid black;
        }

        /* Ajusté a negro puro para que se vea como el formato oficial */

        /* Utilidades de Padding/Margin del original */
        .p-t-1 {
            padding-top: 1pt;
        }

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

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

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

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

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

        .h-10 {
            height: 10pt;
        }

        .h-14 {
            height: 14pt;
        }

        /* Estilos específicos para el Grid del Aviso */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        .bg-grey {
            background-color: #E4E4E4;
        }

        .section-header {
            font-size: 8pt;
            font-weight: bold;
            background-color: #CCCCCC;
            text-align: center;
            border: 1pt solid black;
        }

        .input-box {
            border-bottom: 1pt solid black;
            min-height: 10pt;
        }

        .cell-pad {
            padding: 2pt 4pt;
        }
    </style>
</head>

<body>
    <table cellspacing="0">
        <tr>
            <td class="border bg-grey center" style="width: 80%;">
                <p class="titulo center">AVISO CONSOLIDADO</p>
            </td>
            <td class="border center" style="width: 20%;">
                <p class="normal">Página <span class="small-bold">1</span> de <span class="small-bold">1</span></p>
            </td>
        </tr>
    </table>

    <table cellspacing="0" style="margin-top: -1pt;">
        <tr>
            <td class="border cell-pad" style="width: 40%;">
                <span class="tiny-bold">NUM. PEDIMENTO: </span>
                <span class="tiny">{{ aviso.pedimento_completo }}</span>
            </td>
            <td class="border cell-pad" style="width: 20%;">
                <span class="tiny-bold">T. OPER: </span>
                <span class="tiny">{{ aviso.tipo_operacion }}</span>
            </td>
            <td class="border cell-pad" style="width: 20%;">
                <span class="tiny-bold">CVE. PEDIMENTO: </span>
                <span class="tiny">{{ aviso.clave_pedimento }}</span>
            </td>
            <td class="border bg-grey center" style="width: 20%;">
                <span class="tiny-bold">CERTIFICACIONES</span>
                <br>
                <span class="tiny-bold" style="font-size: 6pt;">TIPO: {{ aviso.tipo_documento }}</span>
            </td>
        </tr>
    </table>

    <table cellspacing="0" style="margin-top: -1pt;">
        <tr>
            <td class="border cell-pad" colspan="3">
                <span class="tiny-bold">NUMERO DE ACUSE DE VALOR: </span>
                <span class="tiny">{{ aviso.acus_valor }}</span>
            </td>
            <td class="border" rowspan="4" style="vertical-align: top;">
                <p class="mini">&nbsp;</p>
            </td>
        </tr>
        <tr>
            <td class="border cell-pad" style="width: 25%;">
                <span class="tiny-bold">ADUANA E/S: </span>
                <span class="tiny">{{ aviso.aduana_seccion }}</span>
            </td>
            <td class="border cell-pad" style="width: 25%;">
                <span class="tiny-bold">NUM. REMESA: </span>
                <span class="tiny">{{ aviso.numero_remesa }}</span>
            </td>
            <td class="border cell-pad" style="width: 30%;">
                <span class="tiny-bold">PESO BRUTO: </span>
                <span class="tiny">{{ aviso.peso_bruto }}</span>
            </td>
        </tr>
        <tr>
            <td colspan="3" class="section-header">DATOS DEL IMPORTADOR/EXPORTADOR</td>
        </tr>
        <tr style="height: 40pt;">
            <td colspan="3" class="border cell-pad" style="vertical-align: top;">
                <div style="float: left; width: 30%;">
                    <p class="tiny-bold">RFC:</p>
                    <p class="tiny">{{ empresa.rfc }}</p>
                </div>
                <div style="float: left; width: 70%;">
                    <p class="tiny-bold">NOMBRE, DENOMINACION O RAZON SOCIAL:</p>
                    <p class="tiny">{{ empresa.razon_social }}</p>
                    <p class="mini">{{ empresa.direccion_completa }}</p>
                </div>
            </td>
        </tr>
    </table>

    <table cellspacing="0" style="margin-top: -1pt;">
        <tr style="height: 60pt;">
            <td class="border cell-pad" style="width: 25%; vertical-align: top;">
                <p class="tiny-bold">CODIGO DE ACEPTACION:</p>
                <p class="normal center p-t-3">{{ aviso.codigo_aceptacion }}</p>
            </td>
            <td class="border cell-pad" style="width: 55%; vertical-align: top;">
                <p class="tiny-bold">CODIGO DE BARRAS</p>
                <div class="center p-t-2">
                    {% if aviso.codigo_barras_b64 %}
                    <img src="{{ aviso.codigo_barras_b64 }}" style="height: 60pt; max-width: 90%;" />
                    {% else %}
                    <br><br><br>
                    {% endif %}
                </div>
            </td>
            <td class="border cell-pad" style="width: 20%; vertical-align: top;">
                <p class="tiny-bold">CLAVE DE LA SECCION ADUANERA DE DESPACHO:</p>
                <p class="grande center p-t-3">{{ aviso.clave_seccion }}</p>
            </td>
        </tr>
    </table>

    <table cellspacing="0" style="margin-top: -1pt;">
        <tr>
            <td class="section-header" style="text-align: left; padding-left: 5pt;">MARCAS, NUMEROS Y TOTAL DE BULTOS:
            </td>
        </tr>
        <tr>
            <td class="border cell-pad" style="height: 20pt; vertical-align: top;">
                <p class="tiny">{{ aviso.marcas_numeros_bultos }}</p>
            </td>
        </tr>
    </table>

    <table cellspacing="0" style="margin-top: -1pt;">
        <tr>
            <td class="section-header"
                style="width: 25%; text-align: left; padding-left: 5pt; background-color: #E4E4E4;">NUMERO DE CANDADO:
            </td>
            <td class="border center tiny" style="width: 15%;">{{ aviso.candados[0] if aviso.candados|length > 0 }}</td>
            <td class="border center tiny" style="width: 15%;">{{ aviso.candados[1] if aviso.candados|length > 1 }}</td>
            <td class="border center tiny" style="width: 15%;">{{ aviso.candados[2] if aviso.candados|length > 2 }}</td>
            <td class="border center tiny" style="width: 15%;">{{ aviso.candados[3] if aviso.candados|length > 3 }}</td>
            <td class="border center tiny" style="width: 15%;">{{ aviso.candados[4] if aviso.candados|length > 4 }}</td>
        </tr>
    </table>

    <table cellspacing="0" style="margin-top: -1pt;">
        <tr>
            <td class="section-header"
                style="text-align: left; padding-left: 5pt; background-color: #E4E4E4; border-bottom: 0;">1RA. REVISION
            </td>
        </tr>
        <tr>
            <td class="border h-14"></td>
        </tr>
        <tr>
            <td class="section-header"
                style="text-align: left; padding-left: 5pt; background-color: #E4E4E4; border-bottom: 0;">2DA. REVISION
            </td>
        </tr>
        <tr>
            <td class="border h-14"></td>
        </tr>
    </table>

    <table cellspacing="0" style="margin-top: -1pt;">
        <tr>
            <td class="section-header"
                style="width: 25%; text-align: left; padding-left: 5pt; background-color: #CCCCCC;">NUMERO/TIPO:</td>
            <td class="border cell-pad tiny" style="width: 25%;">{{ aviso.vehiculo_placas }}</td>
            <td class="border cell-pad tiny" style="width: 25%;">{{ aviso.vehiculo_tipo }}</td>
            <td class="border cell-pad tiny" style="width: 25%;"></td>
        </tr>
    </table>

    <table cellspacing="0" style="margin-top: -1pt;">
        <tr>
            <td class="section-header" style="text-align: center; background-color: #CCCCCC;">OBSERVACIONES</td>
        </tr>
        <tr>
            <td class="border" style="height: 100pt; vertical-align: top; padding: 5pt;">
                <p class="tiny">{{ aviso.observaciones }}</p>
            </td>
        </tr>
    </table>

    <table cellspacing="0" style="margin-top: -1pt;">
        <tr>
            <td class="border cell-pad" style="vertical-align: top; height: 90pt;">
                <p class="tiny-bold">AGENTE ADUANAL, APODERADO ADUANAL:</p>

                <div style="margin-top: 5pt;">
                    <span class="tiny-bold">NOMBRE: </span>
                    <span class="tiny">{{ agente.nombre }}</span>
                </div>

                <div style="margin-top: 2pt;">
                    <div style="display: inline-block; width: 45%;">
                        <span class="tiny-bold">RFC: </span>
                        <span class="tiny">{{ agente.rfc }}</span>
                    </div>
                    <div style="display: inline-block; width: 50%;">
                        <span class="tiny-bold">CURP: </span>
                        <span class="tiny">{{ agente.curp }}</span>
                    </div>
                </div>

                <div style="margin-top: 10pt;">
                    <span class="tiny-bold">MANDATARIO/PERSONA AUTORIZADA:</span>
                </div>

                <div style="margin-top: 2pt;">
                    <span class="tiny-bold">NOMBRE: </span>
                    <span class="tiny">{{ mandatario.nombre }}</span>
                </div>

                <div style="margin-top: 2pt;">
                    <div style="display: inline-block; width: 45%;">
                        <span class="tiny-bold">RFC: </span>
                        <span class="tiny">{{ mandatario.rfc }}</span>
                    </div>
                    <div style="display: inline-block; width: 50%;">
                        <span class="tiny-bold">CURP: </span>
                        <span class="tiny">{{ mandatario.curp }}</span>
                    </div>
                </div>

                <div style="margin-top: 5pt; border-top: 1pt solid black; padding-top: 2pt;">
                    <span class="tiny-bold">NUMERO DE SERIE DEL CERTIFICADO: </span>
                    <span class="tiny">{{ aviso.numero_certificado }}</span>
                </div>
                <div style="margin-top: 2pt;">
                    <span class="tiny-bold">e.firma: </span>
                    <p class="mini" style="word-wrap: break-word;">{{ aviso.firma_electronica }}</p>
                </div>
            </td>
        </tr>
    </table>

    <p class="mini center p-t-5">*********************************************************************** FIN DE LA
        IMPRESION ***********************************************************************</p>

</body>

</html>