97 lines
4.8 KiB
HTML
97 lines
4.8 KiB
HTML
<!doctype html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Bloques por rango de fechas · MARMOTECH</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
:root{
|
|
--page:#EAECEF; --card:#FFFFFF; --sunk:#F3F5F7;
|
|
--ink:#20242A; --muted:#697079; --faint:#9AA1AA;
|
|
--line:#D9DDE2; --brand:#1F6E5C; --almacen:#2C3E56; --produccion:#1F6E5C;
|
|
--shadow:0 1px 2px rgba(20,24,30,.06),0 6px 20px rgba(20,24,30,.05);
|
|
--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
|
|
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
|
|
}
|
|
@media (prefers-color-scheme:dark){
|
|
:root{
|
|
--page:#121519; --card:#1A1E23; --sunk:#15181C;
|
|
--ink:#E7EAED; --muted:#98A0A9; --faint:#6B747E;
|
|
--line:#2A2F36; --brand:#3FA588; --almacen:#8fa2bd; --produccion:#3FA588;
|
|
--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.28);
|
|
}
|
|
}
|
|
*{box-sizing:border-box}
|
|
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);line-height:1.5;
|
|
-webkit-font-smoothing:antialiased;font-size:15px}
|
|
.wrap{max-width:1000px;margin:0 auto;padding:28px 22px 64px}
|
|
.top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
|
|
padding-bottom:16px;border-bottom:1px solid var(--line)}
|
|
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.14em;
|
|
font-size:12px;text-transform:uppercase;color:var(--muted)}
|
|
.brand b{color:var(--ink)}
|
|
.brand .dot{width:9px;height:9px;border-radius:2px;background:var(--brand);transform:rotate(45deg)}
|
|
.top .sub{font-size:12px;color:var(--faint);letter-spacing:.04em}
|
|
.hero{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
|
|
margin-top:22px;padding:22px 26px}
|
|
.hero .eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
|
|
.hero .ttl{font-size:clamp(20px,4vw,28px);font-weight:700;margin:6px 0 2px;letter-spacing:-.01em}
|
|
.hero .ttl b{font-family:var(--mono);color:var(--brand)}
|
|
.hero .desc{color:var(--muted);font-size:13.5px}
|
|
h2{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
|
|
font-weight:700;margin:34px 0 12px}
|
|
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);background:var(--card)}
|
|
table{border-collapse:collapse;width:100%;font-size:13.5px}
|
|
thead th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
|
|
font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--sunk)}
|
|
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
|
|
tbody tr:last-child td{border-bottom:none}
|
|
tbody tr:hover td{background:color-mix(in srgb,var(--brand) 5%,transparent)}
|
|
.bq{font-family:var(--mono);font-weight:600;color:var(--ink)}
|
|
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
|
|
.est{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
|
|
.est.alm{color:var(--almacen);background:color-mix(in srgb,var(--almacen) 14%,transparent)}
|
|
.est.pro{color:var(--produccion);background:color-mix(in srgb,var(--produccion) 14%,transparent)}
|
|
.empty{padding:40px;text-align:center;color:var(--muted)}
|
|
.footnote{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--faint);line-height:1.6}
|
|
.footnote code{font-family:var(--mono);background:var(--sunk);padding:1px 6px;border-radius:5px;color:var(--muted)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="top">
|
|
<div class="brand"><span class="dot"></span><b>MARMOTECH</b> · Trazabilidad de Producción</div>
|
|
<div class="sub">Bloques por rango de fechas · cttb00003</div>
|
|
</div>
|
|
|
|
<section class="hero">
|
|
<div class="eyebrow">Bloques con movimiento</div>
|
|
<div class="ttl">Período: <b>{{DESDE}}</b> — <b>{{HASTA}}</b></div>
|
|
<div class="desc">{{NBLOQUES}} bloque(s) con al menos un movimiento en el período.</div>
|
|
</section>
|
|
|
|
<h2>Detalle por bloque</h2>
|
|
<div class="tablewrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Bloque</th><th>Descripción</th><th>Origen</th><th>Desde</th><th>Hasta</th>
|
|
<th class="num">Movs.</th><th class="num">Deptos.</th>
|
|
<th class="num">Entró</th><th class="num">Salió</th><th class="num">Aprov.</th>
|
|
<th>Estado</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{ROWS}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="footnote">
|
|
Generado desde <code>cttb00003</code> con <code>fecha</code> entre {{DESDE}} y {{HASTA}}.
|
|
Para ver el recorrido completo de un bloque, use el botón <b>Trazabilidad</b> e ingrese su código.
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|