2025-12-09 10:42:13 +00:00
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Factura</title>
<style type="text/css"> {{ asset 'tailwind.min.css' }} </style>
<style type="text/css">
header {
width: 100%;
margin-bottom: 15px;
}
/* Fila superior */
.top-header {
display: flex;
justify-content: space-between;
width: 100%;
}
/* Bloque izquierdo */
.left-block {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 75%;
}
.logo {
height: 80px;
margin-bottom: 5px;
}
.company-text {
font-size: 7pt;
line-height: 1.2;
padding-left: 10px;
text-align: right;
}
/* Bloque derecho */
.right-block {
display: flex;
flex-direction: column;
/* uno encima de otro */
align-items: flex-end;
/* o flex-start / center según quieras */
justify-content: flex-start;
width: 25%;
padding: 4px;
}
.factura-img {
height: 45px;
}
.factura-text {
font-size: 26px;
font-weight: bolder;
}
/* Fila inferior */
.bottom-header {
margin-top: 10px;
display: flex;
justify-content: space-between;
gap: 20px;
}
/* Cuadros */
.info-box {
width: 40%;
}
.info-dire {
width: 70%;
}
/* ---------------------------- */
/* ESTRUCTURA BODY */
/* ---------------------------- */
body {
font-family: Arial, sans-serif;
margin: 40px;
color: #333;
font-size: 9pt;
line-height: 1.5;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 0px;
margin-bottom: 10px;
}
table th,
table td {
padding: 3px 10px;
text-align: left;
vertical-align: top;
}
table th {
border-bottom: 1px solid #000;
}
.totals {
margin-top: 20px;
width: 100%;
}
.totals td {
padding: 5px 10px;
}
.totals td.label {
text-align: right;
font-weight: bold;
}
/* Anchos por columna */
.col-concepto { width: auto; text-align: left; }
.col-cantidad { width: 70px; text-align: center; border-right: 1px solid #000;}
.col-precio { width: 110px; text-align: right; border-right: 1px solid #000;}
2025-12-10 18:02:08 +00:00
.col-dto { width: 50px; text-align: center; border-right: 1px solid #000;}
2025-12-09 10:42:13 +00:00
.col-total { width: 110px; text-align: right; }
.resume-table td {
background: #f0f0f0; /* gris como en la imagen */
}
.resume-table th {
border: transparent; /* gris como en la imagen */
}
/* Columna izquierda (notas / forma de pago) */
.left-col {
width: 70%;
vertical-align: top;
padding: 10px;
border: 1px solid #000;
}
/* Etiquetas */
.resume-table .label {
width: 15%;
padding: 6px 8px;
text-align: right;
border: 1px solid #000;
}
/* Valores numéricos */
.resume-table .value {
width: 15%;
padding: 6px 8px;
text-align: right;
border: 1px solid #000;
}
/* Total factura */
.total-row .label,
.total-row .value {
background-color: #eee;
font-size: 9pt;
border: 1px solid #000;
}
.resume-table .empty {
border: 1px solid transparent;
}
footer {
margin-top: 40px;
font-size: 8px;
}
2025-12-10 18:02:08 +00:00
.footer-row {
display: flex;
justify-content: space-between;
align-items: top;
width: 100%;
margin-top: 4px;
}
.footer-left {
text-align: left;
font-size: 8pt;
line-height: 1.2;
max-width: 25%; /* evita que pise los sellos */
}
.footer-right {
display: flex;
justify-content: flex-end;
align-items: top;
gap: 8px; /* separación entre sellos */
max-width: 75%;
}
.footer-right img {
width: 100%; /* ajusta el tamaño de los sellos */
object-fit: contain;
}
2025-12-09 10:42:13 +00:00
@media print {
* {
-webkit-print-color-adjust: exact;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
}
</style>
</head>
<body>
<header>
<!-- FILA SUPERIOR: logo + dirección / imagen factura -->
<div class="top-header">
<div class="left-block">
<div style="display: flex; align-items: center; gap: 4px; align-content: stretch">
2025-12-10 18:02:08 +00:00
<img src=" {{ asset 'logo_uecko.jpg' }} " alt="Logo Uecko" class="logo" />
2025-12-09 10:42:13 +00:00
{{ # if verifactu .qr_code }}
<div style="flex-grow: 0; flex-shrink: 0; flex-basis:90px;">
<img src=" {{ verifactu .qr_code }} " alt="QR factura" style="width: 90px; height: 90px;" />
</div>
<div style="text-align: left; flex-grow: 1; flex-shrink: 1; flex-basis: auto;">
2025-12-10 18:02:08 +00:00
QR tributario factura verificable en sede electronica de AEAT VERI*FACTU
2025-12-09 10:42:13 +00:00
</div>
{{ / if }}
</div>
</div>
<div class="right-block">
<div>
<div class="company-text">
2025-12-10 18:02:08 +00:00
<p>PUEDE QUE QR</p>
2025-12-09 10:42:13 +00:00
</div>
</div>
</div>
</div>
<!-- FILA INFERIOR: cuadro factura + cuadro cliente -->
<div class="bottom-header">
<div class="info-box">
2025-12-10 18:02:08 +00:00
<p>Nº de factura: {{ series }} {{ in voice_number }} </p>
2025-12-09 10:42:13 +00:00
<p>Fecha: {{ in voice_date }} </p>
2025-12-10 18:02:08 +00:00
<p>Cod. Cliente: {{ in voice_date }} </p>
<p>Ref. Cliente: {{ in voice_date }} </p>
2025-12-09 10:42:13 +00:00
</div>
<div class="info-box info-dire">
<h2 style="font-weight:600; text-transform:uppercase; margin-bottom:0.25rem;"> {{ recipient .name }} </h2>
<p> {{ recipient .tin }} </p>
<p> {{ recipient .street }} </p>
<p> {{ recipient .postal_code }} {{ recipient .city }} {{ recipient .province }} </p>
</div>
</div>
</header>
<main id="main">
<section id="details">
2025-12-10 18:02:08 +00:00
<p class="factura-text">FACTURA</p>
2025-12-09 10:42:13 +00:00
<!-- Tu tabla -->
<table class="table-header">
<thead>
<tr>
<th class="col-cantidad">Cantidad</th>
2025-12-10 18:02:08 +00:00
<th class="col-concepto">Concepto</th>
2025-12-09 10:42:13 +00:00
<th class="col-precio">Precio unidad</th>
2025-12-10 18:02:08 +00:00
<th class="col-dto">Dto</th>
2025-12-09 10:42:13 +00:00
<th class="col-total">Importe total</th>
</tr>
</thead>
<tbody>
{{ # each items }}
<tr>
<td class="col-cantidad"> {{ # if quantity }} {{ quantity }} {{ else }} {{ / if }} </td>
2025-12-10 18:02:08 +00:00
<td class="col-concepto"> {{ description }} </td>
2025-12-09 10:42:13 +00:00
<td class="col-precio"> {{ # if unit_amount }} {{ unit_amount }} {{ else }} {{ / if }} </td>
2025-12-10 18:02:08 +00:00
<td class="col-dto">DTO</td>
2025-12-09 10:42:13 +00:00
<td class="col-total"> {{ # if taxable_amount }} {{ taxable_amount }} {{ else }} {{ / if }} </td>
</td>
</tr>
{{ / each }}
</tbody>
</table>
<table class="resume-table">
<thead>
<tr>
<th class="col-concepto"></th>
{{ # if discount_percentage }}
<th class="col-total">Importe neto</th>
<th class="col-total">Dto {{ discount_percentage }} </th>
{{ / if }}
<th class="col-total">Base imponible</th>
{{ # each taxes }}
<th class="col-total"> {{ tax_name }} </th>
{{ / each }}
<th class="col-total"><strong>Total</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-concepto"></td>
{{ # if discount_percentage }}
<td class="col-total"> {{ subtotal_amount }} </td>
<td class="col-total"> {{ discount_amount .value }} </td>
{{ / if }}
<td class="col-total"> {{ taxable_amount }} </td>
{{ # each taxes }}
<td class="col-total"> {{ taxes_amount }} </td>
{{ / each }}
<td class="col-total"> {{ total_amount }} </td>
</tr>
</tbody>
</table>
<!-- Columna izquierda: notas y forma de pago -->
<table>
<tr>
<td class="info-box" style="text-align: right;">
{{ # if payment_method }}
<p><strong>Forma de pago</strong><br/> {{ payment_method }} </p>
{{ / if }}
{{ # if notes }}
<p><strong>Notas</strong><br/> {{ notes }} </p>
{{ / if }}
</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer id="footer">
<tfoot >
<div style="border-bottom: 1px solid #000;">
2025-12-10 18:02:08 +00:00
<p>Abeto Design S.L. Insc. en el Reg. Merc. de Madrid, Tomo 23.926, Libro 0, Folio 58, Sección 8, Hoja M-430952 CIF: B85033132</p>
</div>
<div class="footer-row">
<div class="footer-left">
<b>Sede Central / Razón Social</b><br>
ABETO DESIGN S.L.<br>
C/Bélmez, 22 - Pol.Ind. Albarreja<br>
28946 Fuenlabrada - Madrid<br>
info@uecko.com –
Tlf. +34 916 099 394
</div>
<div class="footer-right">
<img src=" {{ asset 'sellos.jpg' }} " alt="Sellos calidad" />
</div>
2025-12-09 10:42:13 +00:00
</div>
<div>
2025-12-10 18:02:08 +00:00
<p style="text-align: left; font-size: 6pt;"><b>Información básica sobre protección de datos</b><br/>Responsable: ABETO DESIGN S.L. Finalidad: Prestar los servicios solicitados y realizar la gestión contable, fiscal y administrativa, así como enviarle comunicaciones comerciales sobre nuestros productos y/o servicios. Legitimación: Ejecución de un contrato. Interés legítimo del Responsable. Destinatarios: No se cederán datos a terceros, salvo obligación legal. Derechos: Tiene derecho a acceder, rectificar y suprimir los datos, así como otros derechos, indicados en la información adicional, que puede ejercer enviando un correo electrónico con copia de NIF a nuestra dirección electrónica: administracion@uecko.com. Procedencia: El propio interesado. Información adicional: Puede consultar información adicional y detallada sobre Protección de Datos en nuestra página web: www.uecko.com
* Solo los productos que aparecen identificados como tales en este documento están certificados FSC®</p>
2025-12-09 10:42:13 +00:00
</div>
2025-12-10 18:02:08 +00:00
<div class="footer-row">
<div class="footer-left">
<b>CERTIFICADO FSC CODIGO: SGSCH-COC-060654</b>
</div>
<div class="footer-right">
<img src=" {{ asset 'sellos2.jpg' }} " alt="Sellos calidad" />
</div>
</div>
2025-12-09 10:42:13 +00:00
</tfoot>
</footer>
</body>
</html>
