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.
298 lines
17 KiB
HTML
298 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!-- ════════════════════════════════════════════════════════════════════
|
|
PLANTILLA BASE — REPORTES / COTIZACIONES ARS INTEGRADORES
|
|
Standalone (sin Flask/Jinja). Copia este archivo, rellena las ZONAS
|
|
DE EDICIÓN marcadas con <!-- EDIT ... --> y ábrelo en Chrome.
|
|
Para PDF: botón "Exportar PDF" (esquina inf. der.) → Guardar como PDF.
|
|
Requiere que "logo-report.jpg" y "paged.polyfill.js" estén EN LA MISMA
|
|
CARPETA que este archivo.
|
|
════════════════════════════════════════════════════════════════════ -->
|
|
<!-- EDIT: título de la pestaña del navegador -->
|
|
<title>Reporte — ARS Integradores</title>
|
|
<style>
|
|
:root {
|
|
--pink: #c81b74; /* color primario ARS — NO cambiar */
|
|
--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);
|
|
}
|
|
|
|
/* ── Modo PANTALLA (por defecto) ─────────────────────────────── */
|
|
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); transition: background 0.15s;
|
|
}
|
|
.export-btn:hover { background: #a5145e; }
|
|
|
|
/* ── Modo PAGINADO (activado por <html class="paged"> al exportar) ─
|
|
Aquí ocurre la MAGIA de header+footer en CADA página del PDF vía
|
|
"running elements" + @page. NO reinventar esto. ──────────────── */
|
|
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; } }
|
|
|
|
/* ── Header / Footer ──────────────────────────────────────────── */
|
|
.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; }
|
|
|
|
/* ── Bloque de título (parallelogram) ─────────────────────────── */
|
|
.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; }
|
|
|
|
/* ── Barra de folio ───────────────────────────────────────────── */
|
|
.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); }
|
|
|
|
/* ── Info de contrato / cliente ───────────────────────────────── */
|
|
.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 .cnum { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
|
|
.contract-info .cloc { font-size: 13px; color: var(--mid); line-height: 1.6; }
|
|
.contract-info .cloc b { color: var(--dark); }
|
|
|
|
/* ── Barras de estado ─────────────────────────────────────────── */
|
|
.alert-bar {
|
|
margin: 0 40px 22px; background: var(--pink); color: #fff;
|
|
padding: 10px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
|
|
display: flex; align-items: center; gap: 10px;
|
|
}
|
|
.alert-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex-shrink: 0; }
|
|
.resolved-bar {
|
|
margin: 0 40px 22px; background: #eafaf1; border-left: 4px solid #2a9d8f; color: #0d4f3c;
|
|
padding: 10px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
|
|
display: flex; align-items: center; gap: 10px;
|
|
}
|
|
.resolved-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: #2a9d8f; flex-shrink: 0; }
|
|
|
|
/* ── Cuerpo ───────────────────────────────────────────────────── */
|
|
.body { padding: 0 40px 36px; }
|
|
|
|
/* ── Rejilla de KPIs ──────────────────────────────────────────── */
|
|
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 26px; }
|
|
.kpi { border: 1px solid #e0e0e0; border-top: 3px solid var(--dark); padding: 14px 10px; text-align: center; }
|
|
.kpi.pink { border-top-color: var(--pink); }
|
|
.kpi.red { border-top-color: #cc0000; }
|
|
.kpi.amber { border-top-color: #c05000; }
|
|
.kpi.green { border-top-color: #2a9d8f; }
|
|
.kpi .val { font-size: 30px; font-weight: 800; color: var(--dark); line-height: 1; }
|
|
.kpi.pink .val { color: var(--pink); }
|
|
.kpi.red .val { color: #cc0000; }
|
|
.kpi.amber .val { color: #c05000; }
|
|
.kpi.green .val { color: #1a7a6e; }
|
|
.kpi .lbl { font-size: 8.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--mid); margin-top: 6px; }
|
|
|
|
/* ── Secciones ────────────────────────────────────────────────── */
|
|
.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; }
|
|
.section ul { padding-left: 18px; margin-bottom: 9px; }
|
|
.section ul li { font-size: 12px; line-height: 1.8; color: var(--dark); margin-bottom: 2px; }
|
|
/* Para forzar salto de página antes de una sección en el PDF: class="section page-break" */
|
|
html.paged .page-break { break-before: page; }
|
|
|
|
/* ── Tablas ───────────────────────────────────────────────────── */
|
|
.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; }
|
|
|
|
/* ── Totales (cotizaciones) ───────────────────────────────────── */
|
|
.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; }
|
|
|
|
/* ── Badges ───────────────────────────────────────────────────── */
|
|
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 9px; font-weight: 700; letter-spacing: 0.3px; }
|
|
.badge-critical { background: #fdecea; color: #b00; }
|
|
.badge-high { background: #fef3e2; color: #c05000; }
|
|
.badge-medium { background: #fef9e7; color: #906000; }
|
|
.badge-ok { background: #eafaf1; color: #1a7a6e; }
|
|
.badge-active { background: var(--pink-light); color: var(--pink); }
|
|
.badge-info { background: #e8f0fe; color: #1a5cc8; }
|
|
.badge-historic { background: #f0f0f0; color: #666; }
|
|
|
|
/* ── Cajas de resaltado ───────────────────────────────────────── */
|
|
.highlight-box { background: var(--pink-light); border-left: 3px solid var(--pink); padding: 12px 16px; font-size: 11px; color: #5a0030; line-height: 1.8; margin-bottom: 14px; }
|
|
.info-box { background: #e8f0fe; border-left: 3px solid #1a5cc8; padding: 12px 16px; font-size: 11px; color: #0d2f6e; line-height: 1.8; margin-bottom: 14px; }
|
|
.warn-box { background: #fef3e2; border-left: 3px solid #c05000; padding: 12px 16px; font-size: 11px; color: #5a2000; line-height: 1.8; margin-bottom: 14px; }
|
|
.success-box { background: #eafaf1; border-left: 3px solid #2a9d8f; padding: 12px 16px; font-size: 11px; color: #0d4f3c; line-height: 1.8; margin-bottom: 14px; }
|
|
|
|
/* ── Rejilla de causas ────────────────────────────────────────── */
|
|
.cause-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
|
|
.cause-card { background: var(--pink-light); border-left: 3px solid var(--pink); padding: 14px; }
|
|
.cause-card h4 { font-size: 10px; font-weight: 700; color: var(--pink); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
|
|
.cause-card p { font-size: 11px; color: #444; line-height: 1.7; }
|
|
|
|
/* ── Lista de recomendaciones (numerada) ──────────────────────── */
|
|
.rec-list { counter-reset: rec; list-style: none; padding: 0; }
|
|
.rec-list li { counter-increment: rec; display: flex; gap: 14px; margin-bottom: 15px; align-items: flex-start; }
|
|
.rec-list li::before { content: counter(rec); flex-shrink: 0; width: 24px; height: 24px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
|
|
.rec-body h4 { font-size: 10.5px; font-weight: 700; color: var(--dark); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }
|
|
.rec-body p { font-size: 11px; color: #444; line-height: 1.75; }
|
|
.rec-body .tag { display: inline-block; margin-top: 5px; padding: 1px 8px; font-size: 9px; font-weight: 700; background: var(--pink-light); color: var(--pink); }
|
|
.rec-body .tag.amber { background: #fef3e2; color: #c05000; }
|
|
.rec-body .tag.green { background: #eafaf1; color: #1a7a6e; }
|
|
.rec-body .tag.blue { background: #e8f0fe; color: #1a5cc8; }
|
|
|
|
/* ── Línea de tiempo ──────────────────────────────────────────── */
|
|
.timeline { list-style: none; padding: 0; border-left: 2px solid var(--pink); margin-left: 10px; margin-bottom: 14px; }
|
|
.timeline li { position: relative; padding: 0 0 16px 22px; }
|
|
.timeline li:last-child { padding-bottom: 0; }
|
|
.timeline li::before { content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); }
|
|
.timeline .tl-time { font-size: 9px; font-weight: 700; color: var(--mid); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
|
|
.timeline .tl-desc { font-size: 11px; color: var(--dark); line-height: 1.65; }
|
|
|
|
/* ── Misc ─────────────────────────────────────────────────────── */
|
|
.divider { height: 1px; background: #e5dde3; margin: 20px 0; }
|
|
code { background: #f0f0f0; padding: 1px 5px; font-family: 'Courier New', monospace; font-size: 10.5px; color: #c81b74; border-radius: 2px; }
|
|
|
|
/* EDIT: agrega aquí CSS extra específico de este reporte si lo necesitas */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<button class="export-btn" onclick="exportPDF()">⎙ Exportar PDF</button>
|
|
|
|
<!-- ── HEADER (se repite en cada página del PDF) ───────────────────── -->
|
|
<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">
|
|
|
|
<!-- ══════════════════ ZONA DE EDICIÓN — CONTENIDO ══════════════════ -->
|
|
|
|
<!-- EDIT: Título -->
|
|
<div class="title-wrap">
|
|
<div class="title-block">
|
|
<div class="label">Título del Reporte</div>
|
|
<div class="subtitle">Subtítulo — Sitio / Cliente</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- EDIT: Barra de folio -->
|
|
<div class="folio-bar">
|
|
<span class="folio-num">RPT-2026-000</span>
|
|
<span class="folio-meta">
|
|
<b>Fecha:</b> 15 de julio de 2026 |
|
|
<b>Referencia:</b> — |
|
|
<b>Clasificación:</b> Confidencial
|
|
</span>
|
|
</div>
|
|
|
|
<!-- EDIT: Info de cliente/contrato -->
|
|
<div class="contract-info">
|
|
<div class="cname">Nombre del Cliente</div>
|
|
<div class="cloc">
|
|
<b>Contrato:</b> ... |
|
|
<b>Responsable:</b> ARS Integradores |
|
|
<b>Preparado por:</b> ...
|
|
</div>
|
|
</div>
|
|
|
|
<!-- EDIT: Cuerpo. Cada bloque temático es una .section.
|
|
Usa los componentes documentados en AGENT_GUIDE.md -->
|
|
<div class="body">
|
|
|
|
<div class="section">
|
|
<h2>Resumen Ejecutivo</h2>
|
|
<p>Escribe aquí el contenido...</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- ════════════════ FIN ZONA DE EDICIÓN — CONTENIDO ════════════════ -->
|
|
|
|
</div><!-- /.screen-page -->
|
|
|
|
<!-- ── FOOTER (se repite en cada página del PDF) — datos fijos ARS ── -->
|
|
<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>
|
|
<!-- EDIT: cambia el mes/año de la derecha si aplica -->
|
|
<div class="right">arsintegradores.com<br>Julio 2026</div>
|
|
</div></div>
|
|
|
|
<script>
|
|
// Activa el modo paginado y ejecuta Paged.js sólo al exportar,
|
|
// para que la vista de edición en pantalla sea normal.
|
|
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('No se encontró paged.polyfill.js en la misma carpeta que este archivo.');
|
|
document.documentElement.classList.remove('paged');
|
|
};
|
|
document.body.appendChild(s);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|