Mario Daniel Dominguez Sosa
a2bd6cb697
Extraído de autosanta-stack (agente de santa) para reusarlo en cualquier proyecto: plantilla base + 2 ejemplos + logo + Paged.js, sin dependencias de servidor. Ver AGENT_GUIDE.md.
126 lines
8 KiB
HTML
126 lines
8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>COT-2026-014 — Cotización — ARS Integradores</title>
|
|
<style>
|
|
:root { --pink:#c81b74; --pink-light:#fce8f3; --dark:#2e2e2e; --mid:#666; --light:#f5f5f5; }
|
|
* { box-sizing:border-box; margin:0; padding:0; }
|
|
body { font-family:'Century Gothic',CenturyGothic,'Apple Gothic','Trebuchet MS',Arial,sans-serif; font-size:12px; color:var(--dark); }
|
|
body { background:#e5e5e5; padding:40px 20px; }
|
|
.screen-page { max-width:860px; margin:0 auto; background:#fff; box-shadow:0 6px 32px rgba(0,0,0,0.14); }
|
|
.export-btn { position:fixed; bottom:32px; right:32px; z-index:9999; background:var(--pink); color:#fff; border:none; padding:12px 24px; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; border-radius:4px; box-shadow:0 4px 16px rgba(200,27,116,0.40); }
|
|
.export-btn:hover { background:#a5145e; }
|
|
html.paged body { background:#fff; padding:0; }
|
|
html.paged .screen-page { max-width:none; margin:0; box-shadow:none; }
|
|
html.paged .export-btn { display:none; }
|
|
html.paged .ars-header { position:running(arsHeader); }
|
|
html.paged .ars-footer { position:running(arsFooter); }
|
|
@page { size:letter; margin-top:108px; margin-bottom:56px; margin-left:40px; margin-right:40px;
|
|
@top-left{content:element(arsHeader);width:100%;vertical-align:bottom;}
|
|
@bottom-left{content:element(arsFooter);width:100%;vertical-align:top;} }
|
|
@media print { *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;} }
|
|
.top-bar { display:flex; align-items:center; justify-content:space-between; padding:16px 40px 14px; background:#fff; border-bottom:2px solid var(--pink); width:100%; }
|
|
.ars-block { text-align:right; } .ars-logo { height:70px; display:block; }
|
|
.ars-url { font-size:14px; font-style:italic; font-weight:600; color:var(--pink); margin-top:4px; } .ars-url b { color:var(--dark); font-style:normal; }
|
|
.footer { border-top:2.5px solid var(--pink); padding:10px 40px; display:flex; justify-content:space-between; align-items:center; font-size:10px; color:var(--mid); background:#fff; width:100%; }
|
|
.footer .office-label { color:var(--pink); font-style:italic; font-weight:600; } .footer .right { text-align:right; font-weight:600; color:var(--dark); line-height:1.6; }
|
|
.title-wrap { padding:32px 40px 24px; }
|
|
.title-block { background:var(--pink); clip-path:polygon(0 0,87% 0,100% 100%,0 100%); padding:26px 130px 26px 32px; }
|
|
.title-block .label { font-size:20px; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:1px; line-height:1.1; margin-bottom:10px; }
|
|
.title-block .subtitle { font-size:15px; font-weight:300; color:#fff; text-transform:uppercase; line-height:1.4; }
|
|
.folio-bar { display:flex; justify-content:space-between; align-items:center; background:var(--pink-light); border-left:4px solid var(--pink); padding:8px 14px; margin:0 40px 18px; font-size:10px; }
|
|
.folio-bar .folio-num { font-size:13px; font-weight:800; color:var(--pink); letter-spacing:1px; }
|
|
.folio-bar .folio-meta { color:var(--mid); text-align:right; line-height:1.7; } .folio-bar .folio-meta b { color:var(--dark); }
|
|
.contract-info { padding:0 40px 20px; border-bottom:1px solid #e8e8e8; margin-bottom:20px; }
|
|
.contract-info .cname { font-size:14px; font-weight:700; color:var(--dark); text-transform:uppercase; line-height:1.65; margin-bottom:5px; }
|
|
.contract-info .cloc { font-size:13px; color:var(--mid); line-height:1.6; } .contract-info .cloc b { color:var(--dark); }
|
|
.body { padding:0 40px 36px; }
|
|
.section { margin-bottom:26px; } .section h2 { font-size:15px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--pink); border-left:3px solid var(--pink); padding-left:10px; margin-bottom:12px; }
|
|
.section p { font-size:12px; line-height:1.8; color:var(--dark); margin-bottom:9px; }
|
|
.body table { width:100%; border-collapse:collapse; font-size:11px; margin-bottom:16px; }
|
|
.body table thead tr { background:var(--pink); } .body table thead th { padding:9px 12px; text-align:left; font-weight:600; font-size:9.5px; letter-spacing:0.5px; text-transform:uppercase; color:#fff; }
|
|
.body table tbody tr:nth-child(even) { background:#fdf2f8; } .body table tbody td { padding:8px 12px; border-bottom:1px solid #ecdde7; vertical-align:middle; }
|
|
.body table td.num { text-align:right; font-variant-numeric:tabular-nums; }
|
|
.totals { width:320px; margin-left:auto; font-size:12px; }
|
|
.totals .row { display:flex; justify-content:space-between; padding:6px 12px; border-bottom:1px solid #ecdde7; }
|
|
.totals .row.grand { background:var(--pink); color:#fff; font-weight:800; font-size:14px; border:none; } .totals .row .num { font-variant-numeric:tabular-nums; }
|
|
.info-box { background:#e8f0fe; border-left:3px solid #1a5cc8; padding:12px 16px; font-size:11px; color:#0d2f6e; line-height:1.8; margin-bottom:14px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button class="export-btn" onclick="exportPDF()">⎙ Exportar PDF</button>
|
|
|
|
<div class="ars-header"><div class="top-bar">
|
|
<div class="ars-url"><b>ars</b>integradores.com</div>
|
|
<div class="ars-block"><img class="ars-logo" src="logo-report.jpg" alt="ARS Integradores"></div>
|
|
</div></div>
|
|
|
|
<div class="screen-page">
|
|
<div class="title-wrap"><div class="title-block">
|
|
<div class="label">Cotización</div>
|
|
<div class="subtitle">Ampliación de red — Sitio DIF</div>
|
|
</div></div>
|
|
|
|
<div class="folio-bar">
|
|
<span class="folio-num">COT-2026-014</span>
|
|
<span class="folio-meta">
|
|
<b>Fecha:</b> 15 de julio de 2026 |
|
|
<b>Vigencia:</b> 30 días |
|
|
<b>Clasificación:</b> Confidencial
|
|
</span>
|
|
</div>
|
|
|
|
<div class="contract-info">
|
|
<div class="cname">Municipio de Santa Catarina</div>
|
|
<div class="cloc"><b>Atención:</b> Dirección de Informática | <b>Proveedor:</b> ARS Integradores | <b>Moneda:</b> MXN</div>
|
|
</div>
|
|
|
|
<div class="body">
|
|
<div class="section">
|
|
<h2>Partidas</h2>
|
|
<table>
|
|
<thead><tr><th>#</th><th>Descripción</th><th>Cant.</th><th>P. Unitario</th><th>Importe</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>1</td><td>UniFi Switch 48 Pro (US48PRO)</td><td class="num">2</td><td class="num">$18,500.00</td><td class="num">$37,000.00</td></tr>
|
|
<tr><td>2</td><td>UniFi AP U6 Lite (UAPL6)</td><td class="num">6</td><td class="num">$2,300.00</td><td class="num">$13,800.00</td></tr>
|
|
<tr><td>3</td><td>Instalación y configuración (jornada)</td><td class="num">3</td><td class="num">$4,500.00</td><td class="num">$13,500.00</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="totals">
|
|
<div class="row"><span>Subtotal</span><span class="num">$64,300.00</span></div>
|
|
<div class="row"><span>IVA (16%)</span><span class="num">$10,288.00</span></div>
|
|
<div class="row grand"><span>Total MXN</span><span class="num">$74,588.00</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Condiciones</h2>
|
|
<div class="info-box">
|
|
Precios en pesos mexicanos, más IVA ya desglosado. Vigencia de 30 días naturales.
|
|
Tiempo de entrega: 5 a 10 días hábiles sujeto a existencias. No incluye obra civil.
|
|
</div>
|
|
<p>Forma de pago: 50% anticipo, 50% contra entrega. Garantía de equipo según fabricante.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ars-footer"><div class="footer">
|
|
<div><span class="office-label">Oficina</span> (81) 8123 2899<br>Tepatitlán 201 Col. Mitras Sur, Mty. NL, 64020</div>
|
|
<div class="right">arsintegradores.com<br>Julio 2026</div>
|
|
</div></div>
|
|
|
|
<script>
|
|
window.PagedConfig = { auto:false };
|
|
function exportPDF(){
|
|
document.documentElement.classList.add('paged');
|
|
var s=document.createElement('script'); s.src='paged.polyfill.js';
|
|
s.onload=function(){ new Paged.Previewer().preview().then(function(){ window.print(); }); };
|
|
s.onerror=function(){ alert('Falta paged.polyfill.js en la carpeta.'); document.documentElement.classList.remove('paged'); };
|
|
document.body.appendChild(s);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|