Tul xxx Tul

Viewing: referencia_factura.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Factura Digital - CyNe</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f7f7f7;
            margin: 0;
            padding: 10mm 0;
        }

        h2,
        h3 {
            color: #54595F;
            padding-bottom: 10px;
        }

        p {
            color: #54595f;
            font-size: 14px;
            line-height: 1.8;
        }

        td,
        th {
            color: #54595F;
            font-size: 14px;
        }

        tr {
            border-bottom: 0.2px solid #f3f3f3;
            line-height: 2.2;
        }

        .price {
            font-size: 20px;
            /* Asegúrate de incluir la unidad */
        }

        .logo {
            max-width: 150px;
            height: auto;
        }

        .invoice-details {
            font-size: 14px;
        }

        .table-header {
            background-color: #f1f1f1;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 2px solid #54595F;
        }

        .header-border {
            border-bottom: 1px solid #54595f;
            margin-bottom: 20px;
        }

        .total-row {
            font-weight: 600;
            border-top: 2px solid #54595F;
        }

        .invoice-container {
            background-color: white;
            border-radius: 16px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .invoice-header {
            background: linear-gradient(to right, black 50%, white 50%);
            background-size: cover;
            background-position: center;
            color: white;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            padding: 2rem;
            font-size: 15px;
        }

        @media (max-width: 640px) {
            .invoice-header {
                background: black;
                font-size: 12px;
            }
        }

        .align-right {
            text-align: right;
        }

        .align-center {
            text-align: center;
        }

        .print-only {
            display: none;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }

        .invoice-ecomercial img {
            max-width: 300px;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        /* Márgenes totales y firmas */
        @media (max-width: 640px) {
            .mobile-view-adjust {
                margin-left: -250px;
            }

            .mobile-view-adjust2 {
                margin-left: -50px;
            }
        }

        @media print {
            @page {
                margin: 10mm;
                size: auto;
            }

            body {
                margin: 0;
            }

            .container {
                padding: 10mm 0;
                width: 100%;
                max-width: none !important;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }

            .invoice-container {
                height: auto !important;
                min-height: 0 !important;
            }

            .print-only {
                display: block;
            }

            .no-print {
                display: none;
            }

            body * {
                visibility: hidden;
            }

            .container,
            .container * {
                visibility: visible;
            }

            .container {
                position: absolute;
                left: 0;
                top: 0;
                width: 210mm;
                height: 297mm;
                margin: 0;
                padding: 0;
                box-shadow: none;
                border-radius: 0;
            }

            .invoice-header {
                background-color: white !important;
                background-image: none;
                margin-top: -70px;
                color: #000;
            }

            .invoice-header h1 {
                color: #fff !important;
                font-weight: 600;
                font-size: 32px;
            }

            .invoice-header h2 {
                color: #fff !important;
                font-weight: 500;
                font-size: 28px;
                padding-bottom: 5px;
            }

            .invoice-header p {
                color: #fff !important;
                font-size: 22px;
                font-weight: 300;
            }

            td {
                font-size: 11px;
                line-height: normal;
            }

            th {
                font-size: 12px !important;
            }

            .price {
                font-size: 12px;
                /* Asegúrate de incluir la unidad */
            }

            .table-row td {
                border-bottom: .3px solid #f3f3f3;
            }

            .footer-logo {
                width: 0px !important;
            }

            .highlight-section,
            .highlight-section2 {
                padding-bottom: 0;
                margin-bottom: 0;
            }

            .invoice-container {
                min-height: auto;
                height: auto;
            }
        }

        @media print and (max-width: 640px) {
            @page {
                margin: 5mm;
                /* Reducir el margen para dispositivos móviles */
            }

            .container {
                padding: 5mm 0;
                /* Reducir el padding para dispositivos móviles */
            }

            .invoice-header {
                flex-direction: column-reverse;
                align-items: center;
                text-align: center;
            }

            .invoice-header img {
                margin-bottom: 1rem;
            }

            .mb-8.flex.justify-between {
                flex-direction: column !important;
            }

            .mb-8.flex.justify-between>div {
                width: 100% !important;
                text-align: left !important;
                margin-bottom: 1rem !important;
            }

            .w-1\/2 {
                width: 100%;
            }

            table {
                font-size: 11px;
            }

            th,
            td {
                font-size: 11px;
            }

            .invoice-header h1 {
                font-size: 28px;
            }

            .invoice-header h2 {
                font-size: 20px;
            }

            .phone-numbers {
                flex-direction: column;
                align-items: center;
            }

            .table-responsive {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }


        }

        /* Estilos base */
        .desktop-view,
        .mobile-view {
            display: none;
        }

        /* Vista de escritorio */
        @media (min-width: 641px) {
            .desktop-view {
                display: block;
            }
        }

        /* Vista móvil */
        @media (max-width: 640px) {
            .mobile-view {
                display: block;
            }
        }

        .mobile-card {
            background-color: #f3f4f6;
            border-radius: 0.5rem;
            padding: 0.75rem;
            margin-bottom: 0.75rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        /* .mobile-card-content {
                display: grid;
                grid-template-columns: auto 1fr;
                gap: 0.25rem;
                font-size: 0.9em;
            }

            .mobile-card-label {
                font-weight: 600;
                color: #4b5563;
            }

            .mobile-card-value {
                text-align: right;
            } */

        /* Estilo para el título */
        .mobile-card-title {
            font-weight: bold;
            font-size: 1.2em;
            text-align: center;
            color: #1f2937;
            margin-bottom: 1rem;
            display: block;
            /* Asegura que ocupe todo el ancho */
            border-bottom: 2px solid #e5e7eb;
            /* Opcional */
            padding-bottom: 0.5rem;
        }

        /* Ajustar el grid */
        .mobile-card-content {
            display: grid;
            grid-template-columns: auto 1fr;
            /* Mantiene el diseño para label y valor */
            gap: 0.25rem;
            font-size: 0.9em;
            margin-top: 0;
            /* Asegura que no interfiera con el título */
        }

        /* Estilo para etiquetas y valores */
        .mobile-card-label {
            font-weight: 600;
            color: #4b5563;
        }

        .mobile-card-value {
            text-align: right;
        }

        /* Estilos generales */
        .invoice-container {
            background-color: white;
            border-radius: 16px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* Estilos de impresión */
        @media print {
            .invoice-container {
                border-radius: 0;
                /* Sin bordes redondeados en impresión */
                box-shadow: none;
                /* Sin sombra en impresión */
                width: 100%;
                /* Ancho completo en impresión */
                height: auto;
                /* Altura automática en impresión */
            }

            body {
                margin: 0;
                /* Sin márgenes en impresión */
            }

            .print-only {
                display: block;
                /* Mostrar solo en impresión */
            }

            .no-print {
                display: none;
                /* Ocultar en impresión */
            }

            /* Otros estilos específicos para impresión */
            .invoice-header {
                background-color: white !important;
                /* Fondo blanco en impresión */
                color: #000;
                /* Color negro en impresión */
            }

            /* Otros estilos que se aplican solo en impresión */
        }

        /* Estilos para la página de carga */
        #loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: white;
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 9999;
            /* Asegúrate de que esté por encima de otros elementos */
        }

        img {
            max-width: 100%;
            height: auto;
        }

        /* Estilos para el contenido principal */
        #content {
            display: none;
            /* Ocultar el contenido inicialmente */
        }
    </style>

    <script>
        function fetchInvoiceDetails() {
            const urlParams = new URLSearchParams(window.location.search);
            const clientCode = urlParams.get('code');

            if (!clientCode) {
                document.getElementById("loading").innerHTML = "<p>Cliente no encontrado</p>";
                return;
            }

            const scriptUrl = `https://script.google.com/macros/s/AKfycbx31zBoq5cCVCIFHgthCf413k3eh02eGjqw5_qXAd28PfqZZNDcU8YjWpmDNwUsQ88x/exec?code=${clientCode}`;

            fetch(scriptUrl)
                .then(response => response.json())
                .then(data => {
                    document.getElementById("loading").style.display = "none"; // Ocultar la página de carga
                    document.getElementById("content").style.display = "block"; // Mostrar el contenido
                    updateInvoiceDetails(data);
                })
                .catch(error => {
                    console.error("Error:", error);
                    document.getElementById("loading").innerHTML = "<p>Error al obtener los detalles de la factura</p>";
                });
        }

        function updateInvoiceDetails(data) {
            document.getElementById("etapa").textContent = data.etapa || "No disponible";
            document.getElementById("iDPedido").textContent = data.iDPedido || "No disponible";
            const nombreCliente = data.nombreCli || "No disponible";
            document.querySelectorAll('.nombreCli').forEach(element => element.textContent = nombreCliente);
            document.getElementById("eMprendimiento").textContent = nombreCliente;
            document.getElementById("identificacionCli").textContent = data.identificacionCli || "No disponible";
            document.getElementById("direccion").textContent = data.direccionCli || "No disponible";
            document.getElementById("telefono").textContent = data.telefonoCli || "No disponible";
            document.getElementById("eMail").textContent = data.emailCli || "No disponible";
            const nombreContacto = data.contactoCliente || "No disponible";
            document.querySelectorAll('.contacto').forEach(element => element.textContent = nombreContacto);
            document.getElementById("fechaFactura").textContent = data.fechaFactura || "No disponible";
            document.getElementById("fechaLimite").textContent = data.fechaLimite || "No disponible";
            document.getElementById("formadePago").textContent = data.formadePago || "No disponible";
            const projectManager = data.nombreUsu || "No disponible";
            document.querySelectorAll('.vendedor').forEach(element => element.textContent = projectManager);
            document.getElementById("observaciones").textContent = data.observaciones || "";

            // Mostrar/ocultar "Días de Credito"
            document.getElementById("diasContainer").style.display = data.formadePago === "Crédito" ? "block" : "none";

            // Actualizar totales
            document.getElementById("total").textContent = `$${(parseFloat(data.subtotal) || 0).toLocaleString("es-ES") || "No disponible"}`;
            document.getElementById("descuentoP").textContent = `${(data.pDescuento ? parseFloat(data.pDescuento) * 100 : 0).toLocaleString("es-ES")}`;
            document.getElementById("descuentoM").textContent = `$${(parseFloat(data.descuento) || 0).toLocaleString("es-ES") || "No disponible"}`;
            document.getElementById("totalcDescuentos").textContent = `$${(parseFloat(data.total) || 0).toLocaleString("es-ES") || "No disponible"}`;
            document.getElementById("abonado").textContent = `$${(parseFloat(data.abonado) || 0).toLocaleString("es-ES") || "No disponible"}`;
            document.getElementById("restante").textContent = `$${(parseFloat(data.restante) || 0).toLocaleString("es-ES") || "No disponible"}`;

            document.getElementById("firmaCliente").src = data.firmaCliente || "No disponible";
            document.getElementById("firmaVendedor").src = data.firmaVendedor || "No disponible";

            // Construir la tabla de detalles
            const detailsElement = document.getElementById("details");
            if (detailsElement) {
                const { table, mobileView } = construirTabladetalles(data.detalles);
                detailsElement.innerHTML = `<div class='desktop-view'><div class='table-responsive'>${table}</div></div><div class='mobile-view'>${mobileView}</div>`;
                console.log("Contenido insertado en el DOM");
            } else {
                console.error("Elemento 'details' no encontrado en el DOM");
            }
        }

        function printDocument() {
            window.print();
        }

        window.onload = fetchInvoiceDetails;

        function construirTabladetalles(detalles) {
            let table = "<table class='w-full header-border desktop-table'><thead class='header-border'><tr class='text-center'><th class='p-1' style='color: #54595f;'>Código</th><th class='p-1' style='color: #54595f;'>Descripción</th><th class='p-1' style='color: #54595f;'>Cantidad</th><th class='p-1' style='color: #54595f;'>Precio Unitario</th><th class='p-1' style='color: #54595f;'>Total</th></tr></thead><tbody>";
            let mobileView = "<div class='mobile-cards'>";
            let currentFase = '';
            let rowspanCount = 0;

            detalles.forEach((detalle, index, array) => {
                if (detalle.fase !== currentFase) {
                    if (rowspanCount > 0) {
                        table = table.replace('{{ROWSPAN}}', rowspanCount);
                    }
                    table += `<tr><td class='fase' style='text-align:left;' rowspan='{{ROWSPAN}}'>${detalle.codigo}</td><td class='accion' style='text-align:left;'>${detalle.descripcion}</td><td class='horas' style='text-align:center;'>${detalle.cantidad}</td><td class='precioHora' style='text-align:center;'>$${parseFloat(detalle.precioUnitario).toFixed(0)}</td><td class='total' style='text-align:center;'>$${parseFloat(detalle.totalD).toFixed(0)}</td></tr>`;
                    currentFase = detalle.codigo;
                    rowspanCount = 1;

                    /* mobileView += `<div class='mobile-fase'>${detalle.codigo}</div>`; */
                } else {
                    table += `<tr><td class='accion' style='text-align:left;'>${detalle.descripcion}</td><td class='horas' style='text-align:center;'>${detalle.cantidad}</td><td class='precioHora' style='text-align:center;'>$${parseFloat(detalle.precioUnitario).toFixed(0)}</td><td class='total' style='text-align:center;'>$${parseFloat(detalle.totalD).toFixed(0)}</td></tr>`;
                    rowspanCount++;
                }

                mobileView += `<div class='mobile-card'>
                    <div class='mobile-card-content'>
                        <span class='mobile-card-title' style="grid-column: span 2;">${detalle.descripcion || ''}</span>
                        <span class='mobile-card-label'>Código:</span>
                        <span class='mobile-card-value'>${detalle.codigo || ''}</span>
                        <span class='mobile-card-label'>Cantidad:</span>
                        <span class='mobile-card-value'>${detalle.cantidad || ''}</span>
                        <span class='mobile-card-label'>Precio Unitario:</span>
                        <span class='mobile-card-value'>$${parseFloat(detalle.precioUnitario).toLocaleString("es-ES", { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
                        <span class='mobile-card-label'>Total:</span>
                        <span class='mobile-card-value'>$${parseFloat(detalle.totalD).toLocaleString("es-ES", { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>

                    </div>
                </div>`;



                if (index === array.length - 1) {
                    table = table.replace('{{ROWSPAN}}', rowspanCount);
                }
            });

            table += "</tbody></table>";
            mobileView += "</div>";

            return { table, mobileView };
        }
    </script>
</head>

<body>
    <div id="loading">
        <img src="http://emprendo.com.co/wp-content/uploads/2024/12/eComercial.gif" alt="Cargando...">
    </div>
    <div id="content">
        <div onload="fetchInvoiceDetails()" class="bg-gray-100">
            <div class="message-container text-center py-4">
                <p class="mb-4" style="padding-left: 20px; padding-right: 20px;">😊 ¡Tu documento ha sido creado! Si no
                    es
                    esencial imprimirlo 🖨️, te animamos a mantenerlo digital y reducir el impacto ambiental 🌿.</p>
                <button onclick="window.print()"
                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    Imprimir Documento
                </button>
            </div>

            <div class="container mx-auto px-4 py-4">
                <div class="invoice-container max-w-4xl mx-auto">
                    <div class="invoice-header mb-6 flex justify-between items-center">

                        <div class="w-full text-center sm:text-left">
                            <img src="http://emprendo.com.co/wp-content/uploads/2024/08/CyNe-Cupon-Web.png"
                                alt="Logo eComercial" class="mobile-view mx-auto" style="max-width: 200px;">
                            <div>Cl. 17 #5A-32, La Cabrera, Cúcuta • Colombia</div>
                            <div><a href="mailto:ecomercial@emprendo.com.co">ecomercial@emprendo.com.co</a></div>
                            <div>3143604300 - 3028424064</div>
                            <div>NIT: 700365064-7</div>
                        </div>


                        <img src="http://emprendo.com.co/wp-content/uploads/2024/08/CyNe-Cupon-Web.png"
                            class="desktop-view" style="max-width: 100px; height: auto;" />
                    </div>
                    <div class="p-8 highlight-section">
                        <!-- Contenido de la factura -->
                        <div class="mb-8 flex flex-col sm:flex-row justify-between">
                            <div class="w-full sm:w-1/2 mb-4">
                                <h2 id="eMprendimiento" class="text-xl font-semibold mb-2">...</h2>

                                <p id="identificacionCli">...</p>
                                <p id="direccion">...</p>
                                <p id="telefono">...</p>
                                <p id="eMail">...</p>
                                <p><strong>Atención a: </strong><span class="contacto">...</span></p>
                            </div>
                            <div class="w-full sm:w-1/2 sm:text-right">
                                <h2 class="text-xl font-semibold mb-2"><span id="etapa">...</span> <span
                                        id="iDPedido">...</span></h2>
                                <p><strong>Fecha de Factura: </strong><span id="fechaFactura">...</span></p>
                                <p><strong>Fecha Límite de Pago: </strong><span id="fechaLimite">...</span></p>
                                <p><strong>Forma de Pago: </strong><span id="formadePago">...</span></p>
                                <p id="diasContainer" style="display: none;"><strong>Días de Credito: </strong><span
                                        id="dias">...</span></p>
                                <p><strong>Project Manager: </strong><span class="vendedor">...</span></p>
                            </div>
                        </div>

                        <!-- Aquí se carga la tabla de detalles -->
                        <div id="details" class="table-responsive">
                            <table class='w-full header-border'>
                                <p>Cargando detalles...</p>
                            </table>
                        </div>

                        <div class="mb-8 flex justify-end totales mobile-view-adjust">
                            <div class="w-1/2">
                                <div class="flex justify-between mb-2" style="color: #54595F;">
                                    <span style="font-weight: 600;">Subtotal:</span>
                                    <span id="total">...</span>
                                </div>

                                <div class="flex justify-between mb-2" style="color: #54595F;">
                                    <span style="font-weight: 600;">Descuento (<span id="descuentoP">0</span>%):</span>
                                    <span id="descuentoM">...</span>
                                </div>

                                <div class="flex justify-between font-semibold text-xl price" style="color: #54595F;">
                                    <span>Total:</span>
                                    <span style="color: #54595f;" id="totalcDescuentos">...</span>
                                </div>
                                <br>
                                <div class="flex justify-between font-semibold text-xl price"
                                    style="line-height: 1.5; color: #54595F;">
                                    <span>Abonado:</span>
                                    <span class="text-green-600" id="abonado">...</span>
                                </div>
                                <div class="flex justify-between font-semibold text-xl price"
                                    style="line-height: 1.5; color: #54595F;">
                                    <span>Pendiente de pago:</span>
                                    <span class="text-red-600" id="restante">...</span>
                                </div>
                            </div>
                        </div>

                        <br>

                        <h2 class="font-semibold">Felicidades, Bienvenido a!</h2>
                        <div class="invoice-ecomercial">
                            <img src="http://emprendo.com.co/wp-content/uploads/2024/12/eComercials.png"
                                alt="Logo eComercial">
                        </div>
                        <div id="notices">
                            <h2 class="text-xl font-semibold">1. Objeto del Contrato</h2>
                            <p><b>CyNe</b> se compromete a crear un paquete de contenidos segun lo incluido en esta
                                factura:
                            </p>

                            <h2 class="text-xl font-semibold mt-5">2. Plazo de Entrega</h2>
                            <p>El tiempo de entrega será de dos días a partir de la fecha y hora en la que se firme este
                                contrato, con las siguientes especificaciones:</p>
                            <p class="mx-5">1️⃣ Al cabo de un día, se entregarán los guiones correspondientes para la
                                revisión
                                inmediata del
                                cliente <b><span class="nombreCli">...</span></b>.</p>
                            <p class="mx-5">2️⃣ Desde la aprobación de los textos, se tomará un día más para la creación
                                de
                                los
                                contenidos.
                                Se considerará un día extra en caso de correcciones posteriores a la entrega.</p>

                            <h2 class="text-xl font-semibold mt-5">3. Condiciones de Pago</h2>
                            <p>El cliente <b><span class="nombreCli">...</span></b> se compromete a pagar el 50% del
                                costo
                                total
                                al inicio
                                del trabajo, y el 50% restante al momento de la entrega del trabajo, en el tiempo y
                                según
                                los
                                métodos de pago estipulados en la presente factura.</p>

                            <h2 class="text-xl font-semibold mt-5">4. Revisión de Contenidos</h2>
                            <p>El cliente <b><span class="nombreCli">...</span></b> tiene derecho a:</p>

                            <p class="mx-5">1️⃣ Una revisión de los guiones a ser utilizados en los spots y las
                                canciones
                                antes
                                de
                                su
                                realización.</p>
                            <p class="mx-5">2️⃣ Una corrección adicional del producto creado tras la aprobación de los
                                textos.
                            </p>
                            <p class="mx-5">Cualquier corrección adicional a las dos mencionadas será cobrada
                                adicionalmente.
                            </p>

                            <h2 class="text-xl font-semibold mt-5">5. Responsabilidades del Cliente</h2>
                            <p>El cliente <b><span class="nombreCli">...</span></b> se compromete a brindar
                                toda la
                                información necesaria
                                para la realización de los contenidos.</p>

                            <h2 class="text-xl font-semibold mt-5">6. Análisis de Mercado</h2>
                            <p><b>CyNe</b> se compromete a realizar un análisis de mercado a través de la
                                herramienta preparada para este
                                fin.</p>

                            <h2 class="text-xl font-semibold mt-5">7. Derechos de Autor</h2>
                            <p>Se ceden los derechos de explotación de las obras al cliente, y la
                                empresa se
                                reserva los derechos de
                                creación
                                conforme a lo establecido en las políticas de derechos de autor
                                internacional.</p>

                            <h2 class="text-xl font-semibold mt-5">8. Confidencialidad</h2>
                            <p><b>CyNe</b> se compromete a mantener la confidencialidad de los
                                datos que
                                aporte el cliente <b><span class="nombreCli">...</span></b> y a no
                                divulgar
                                dicha
                                información a terceros sin el consentimiento previo.
                            </p>

                            <h2 class="text-xl font-semibold mt-5">9. Modificaciones del Contrato</h2>
                            <p>Cualquier modificación a este contrato deberá ser consentida por
                                ambas
                                partes y documentada por escrito.</p>

                            <h2 class="text-xl font-semibold mt-5">10. Firma Electrónica</h2>
                            <p>Las firmas electrónicas que se realicen para dar validez a
                                este
                                contrato tendrán la misma validez legal que
                                las
                                firmas manuscritas.</p>

                            <h2 class="text-xl font-semibold mt-5">11. Fuerza Mayor</h2>
                            <p>Ninguna de las partes será responsable por el
                                incumplimiento de
                                sus obligaciones bajo este contrato si dicho
                                incumplimiento es causado por eventos de fuerza mayor,
                                tales
                                como desastres naturales, actos de gobierno,
                                guerras,
                                o
                                cualquier otra causa fuera del control razonable de las
                                partes.</p>

                            <h2 class="text-xl font-semibold mt-5">12. Aceptación del Contrato</h2>
                            <p><span id="observaciones"> </span> Al firmar este contrato, ambas partes aceptan los
                                términos y
                                condiciones aquí establecidos.</p>

                            <br><br>

                            <div class="flex justify-between mobile-view-adjust2">
                                <div class="text-center">
                                    <img id="firmaVendedor" alt="Firma del Vendedor" style="max-width: 200px;" />
                                    <p><span class="vendedor">...</span></p>
                                    <b>CyNe</b>
                                </div>
                                <div class="text-center">
                                    <img id="firmaCliente" alt="Firma del Cliente" style="max-width: 200px;" />
                                    <p><span class="contacto">...</span></p>
                                    <b><span class="nombreCli">...</span></b>
                                </div>
                            </div>
                        </div>


                        <br><br>

                        <div class="mt-8 text-center text-sm text-gray-600 highlight-section2">
                            <div class="no-print">
                                <p>Gracias por tu confianza en eMprendo, sigue encendiendo tus iDeas 🔥. Para
                                    cualquier consulta, por favor contáctenos a través de <a
                                        href="mailto:ecomercial@emprendo.com.co" target="_blank"
                                        class="text-blue-600 hover:underline">ecomercial@emprendo.com.co</a></p>

                                <div class="flex justify-center items-center space-x-4">
                                    <a href="https://emprendo.com.co/" target="_blank" rel="noopener noreferrer">
                                        <img src="http://emprendo.com.co/wp-content/uploads/2024/09/Logo-eMprendo-1.png"
                                            alt="cuentame" width="150" class="footer-logo">
                                    </a>
                                </div>
                                <div class="flex justify-center items-center space-x-4 phone-numbers">
                                    <a href="https://api.whatsapp.com/send?phone=573028424064" target="_blank"
                                        class="text-blue-600 hover:underline">+57 302 8424064</a>
                                    <span class="text-blue-600 separator"> • </span>
                                    <a href="https://api.whatsapp.com/send?phone=573143604300" target="_blank"
                                        class="text-blue-600 hover:underline">+57 314 3604300</a>
                                </div>
                                <a href="https://emprendo.com.co/eComercial" target="_blank"
                                    class="text-blue-600 hover:underline">emprendo.com.co/eComercial</a>
                            </div>

                            <div class="print-only">
                                <p> Gracias por tu confianza en eMprendo, sigue encendiendo tus iDeas. Para cualquier
                                    consulta,
                                    por favor contáctenos a través de <a href="mailto:ecomercial@emprendo.com.co"
                                        target="_blank"
                                        class="text-blue-600 hover:underline">ecomercial@emprendo.com.co</a>, llmenos al
                                    <a href="https://api.whatsapp.com/send?phone=573028424064" target="_blank"
                                        class="text-blue-600 hover:underline">+57 302 8424064</a>
                                    <span> • </span>
                                    <a href="https://api.whatsapp.com/send?phone=573143604300" target="_blank"
                                        class="text-blue-600 hover:underline">+57 314 3604300</a> o visítenos en <a
                                        href="https://emprendo.com.co/eComercial" target="_blank"
                                        class="text-blue-600 hover:underline">emprendo.com.co/eComercial</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const condicionesPrint = document.getElementById('condiciones-print');
            if (condicionesPrint && window.condicionesPagoTexto) {
                condicionesPrint.textContent = window.condicionesPagoTexto;
            }
        });

        function adjustForPrint() {
            const container = document.querySelector('.container');
            const invoiceContainer = document.querySelector('.invoice-container');

            // Ajustar el tamaño del contenedor de la factura
            invoiceContainer.style.width = '100%';
            invoiceContainer.style.height = 'auto';
            invoiceContainer.style.padding = '10mm';
            invoiceContainer.style.boxShadow = 'none';
            invoiceContainer.style.borderRadius = '0';
            invoiceContainer.style.overflow = 'visible';

            // Eliminar cualquier espacio en blanco adicional
            document.body.style.margin = '0';
            document.body.style.padding = '10mm 0';
            container.style.padding = '10mm 0';

            // Forzar un repintado del contenedor
            container.style.display = 'none';
            container.offsetHeight;
            container.style.display = 'block';

            // Ajustar la altura del contenedor después del repintado
            setTimeout(() => {
                invoiceContainer.style.minHeight = '100%';
            }, 0);
        }

        window.onbeforeprint = adjustForPrint;

        // Añadir un listener para el evento 'afterprint'
        window.addEventListener('afterprint', function () {
            // Restaurar estilos originales después de imprimir
            const container = document.querySelector('.container');
            const invoiceContainer = document.querySelector('.invoice-container');

            container.style = '';
            invoiceContainer.style = '';
            document.body.style = '';
        });
    </script>
</body>

</html>
User / IP	: 216.73.216.217
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64