189 lines
10 KiB
HTML
189 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Trazabilidad del Bloque {{BLOQUE}} · 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; --line-strong:#C4CAD1;
|
|
--brand:#1F6E5C;
|
|
--inicial:#6E5AA6; --produccion:#1F6E5C; --salida:#B4693A; --entrada:#3E6DA6; --almacen:#2C3E56;
|
|
--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; --line-strong:#363C44;
|
|
--brand:#3FA588;
|
|
--inicial:#9c8ad6; --produccion:#3FA588; --salida:#d38a54; --entrada:#6a97d6; --almacen:#8fa2bd;
|
|
--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:1080px;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:24px 26px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
|
|
.hero .eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
|
|
.hero .bid{font-family:var(--mono);font-size:clamp(24px,5vw,36px);font-weight:600;letter-spacing:-.01em;
|
|
margin:6px 0 2px;text-wrap:balance}
|
|
.hero .descbloque{font-size:16px;font-weight:600;color:var(--brand);margin:0 0 6px;text-wrap:balance}
|
|
.hero .desc{color:var(--muted);font-size:13.5px}
|
|
.status{justify-self:end;align-self:start;display:inline-flex;align-items:center;gap:7px;
|
|
font-size:12px;font-weight:600;letter-spacing:.03em;padding:6px 12px;border-radius:999px;
|
|
background:color-mix(in srgb,var(--almacen) 14%,transparent);color:var(--almacen);
|
|
border:1px solid color-mix(in srgb,var(--almacen) 32%,transparent)}
|
|
.status .pulse{width:7px;height:7px;border-radius:50%;background:var(--almacen)}
|
|
.metagrid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
|
|
background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:4px}
|
|
.metagrid div{background:var(--card);padding:12px 14px}
|
|
.metagrid dt{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 4px}
|
|
.metagrid dd{margin:0;font-family:var(--mono);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
|
|
h2{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
|
|
font-weight:700;margin:40px 0 14px;display:flex;align-items:center;gap:10px}
|
|
h2::after{content:"";flex:1;height:1px;background:var(--line)}
|
|
.flow{display:flex;gap:0;align-items:stretch;overflow-x:auto;padding:6px 2px 14px;scrollbar-width:thin}
|
|
.step{flex:0 0 190px;background:var(--card);border:1px solid var(--line);border-radius:12px;
|
|
box-shadow:var(--shadow);padding:14px 15px;position:relative;border-top:3px solid var(--c)}
|
|
.step .dep{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
|
|
.step .depno{font-family:var(--mono);color:var(--faint);font-size:11px;font-weight:500}
|
|
.step .mv{display:inline-block;margin:9px 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
|
|
text-transform:uppercase;padding:3px 8px;border-radius:6px;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent)}
|
|
.step .prod{font-size:13px;font-weight:600;line-height:1.3}
|
|
.step .qty{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--muted);margin-top:3px}
|
|
.step .foot{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);
|
|
font-family:var(--mono);font-size:11px;color:var(--faint);display:flex;justify-content:space-between}
|
|
.arrow{flex:0 0 30px;display:flex;align-items:center;justify-content:center;color:var(--line-strong);
|
|
font-size:22px;line-height:1}
|
|
.tl{position:relative;margin-left:6px;padding-left:30px}
|
|
.tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--line)}
|
|
.ev{position:relative;margin-bottom:14px}
|
|
.ev::before{content:"";position:absolute;left:-30px;top:16px;width:14px;height:14px;border-radius:50%;
|
|
background:var(--card);border:3px solid var(--c);transform:translateX(-1px);z-index:1}
|
|
.ev .row{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--c);
|
|
border-radius:10px;box-shadow:var(--shadow);padding:13px 16px;
|
|
display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center}
|
|
.ev .date{font-family:var(--mono);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
|
|
.ev .main .mv{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--c)}
|
|
.ev .main .ttl{font-weight:600;font-size:14.5px;margin:2px 0 3px;text-wrap:balance}
|
|
.ev .main .meta{font-size:12.5px;color:var(--muted)}
|
|
.ev .main .meta .k{color:var(--faint)}
|
|
.ev .amt{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
|
|
.ev .amt .big{font-size:15px;font-weight:600}
|
|
.ev .amt .doc{font-size:11px;color:var(--faint);margin-top:2px}
|
|
.yield{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
|
|
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:16px 18px}
|
|
.tile .lbl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:600}
|
|
.tile .val{font-family:var(--mono);font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;margin:6px 0 1px}
|
|
.tile .val small{font-size:14px;color:var(--muted);font-weight:500}
|
|
.tile .note{font-size:12px;color:var(--muted)}
|
|
.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}
|
|
th.num,td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
|
|
td.uni{font-family:var(--mono);font-weight:600}
|
|
.aprov{display:inline-block;font-family:var(--mono);font-weight:600;font-size:13px;padding:2px 9px;border-radius:999px}
|
|
.aprov.hi{color:var(--produccion);background:color-mix(in srgb,var(--produccion) 15%,transparent)}
|
|
.aprov.mid{color:var(--salida);background:color-mix(in srgb,var(--salida) 15%,transparent)}
|
|
.aprov.lo{color:#b4443a;background:color-mix(in srgb,#b4443a 15%,transparent)}
|
|
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-size:12px;color:var(--muted)}
|
|
.legend span{display:inline-flex;align-items:center;gap:7px}
|
|
.legend i{width:10px;height:10px;border-radius:3px;background:var(--c)}
|
|
.footnote{margin-top:34px;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)}
|
|
@media (max-width:720px){
|
|
.hero{grid-template-columns:1fr}.status{justify-self:start}
|
|
.metagrid{grid-template-columns:repeat(2,1fr)}
|
|
.yield{grid-template-columns:1fr}
|
|
.ev .row{grid-template-columns:1fr;gap:6px}.ev .amt{text-align:left}
|
|
}
|
|
@media (prefers-reduced-motion:no-preference){
|
|
.status .pulse{animation:p 2.4s ease-in-out infinite}
|
|
@keyframes p{0%,100%{opacity:1}50%{opacity:.35}}
|
|
}
|
|
</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">Recorrido del bloque · cttb00003</div>
|
|
</div>
|
|
|
|
<section class="hero">
|
|
<div>
|
|
<div class="eyebrow">Bloque</div>
|
|
<div class="bid">{{BLOQUE}}</div>
|
|
<div class="descbloque">{{DESCBLOQUE}}</div>
|
|
<div class="desc">{{DESC}}</div>
|
|
</div>
|
|
<span class="status"><span class="pulse"></span>{{ESTADO}}</span>
|
|
<dl class="metagrid">
|
|
<div><dt>Origen</dt><dd>{{ORIGEN}}</dd></div>
|
|
<div><dt>Medida inicial</dt><dd>{{MEDIDA_INI}}</dd></div>
|
|
<div><dt>Movimientos</dt><dd>{{NMOV}}</dd></div>
|
|
<div><dt>Departamentos</dt><dd>{{NDEPTOS}}</dd></div>
|
|
</dl>
|
|
</section>
|
|
|
|
<h2>Recorrido del bloque</h2>
|
|
<div class="flow">
|
|
{{FLOW}}
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<span style="--c:var(--inicial)"><i></i>Inventario inicial</span>
|
|
<span style="--c:var(--produccion)"><i></i>Producción</span>
|
|
<span style="--c:var(--salida)"><i></i>Salida / traslado</span>
|
|
<span style="--c:var(--entrada)"><i></i>Recepción</span>
|
|
<span style="--c:var(--almacen)"><i></i>Almacén</span>
|
|
</div>
|
|
|
|
<h2>Línea de tiempo detallada</h2>
|
|
<div class="tl">
|
|
{{TIMELINE}}
|
|
</div>
|
|
|
|
<h2>Aprovechamiento del bloque</h2>
|
|
<div class="tablewrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Unidad</th>
|
|
<th class="num">Entró / Produjo</th>
|
|
<th class="num">Salió</th>
|
|
<th class="num">Balance (queda / merma)</th>
|
|
<th class="num">Aprovechado</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{BALANCE}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="footnote">
|
|
Generado desde <code>cttb00003</code> filtrando por <code>codigo_bloque = {{BLOQUE}}</code>.
|
|
Las salidas se enlazan a sus recepciones por <code>ref</code>. El mismo <code>codigo_bloque</code> viaja intacto en toda la cadena, hasta almacén (<code>ipprmt044</code>).
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|