:root{
    --graphite:#14181d; --steel:#252c33; --steel-2:#323a42;
    --paper:#f4f5f3; --paper-2:#eaece8; --line:#cfd4cf; --ink:#1a1e22;
    --muted:#6b7178; --aluminium:#aeb4ba;
    --verde:#1f9e5a; --amarillo:#e0a800; --rojo:#cf3328;
    --teal:#0e7c86; --brass:#b68a3e; --brass-deep:#8a6724;
    --r:4px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--graphite);color:var(--ink);
    font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-text-size-adjust:100%}
  .mono{font-family:'IBM Plex Mono',monospace}
  .wrap{max-width:1180px;margin:0 auto;padding:0 16px 64px}

  /* Header */
  header{background:var(--graphite);color:#e8eaec;border-bottom:1px solid #000;
    position:sticky;top:0;z-index:20}
  .head-in{max-width:1180px;margin:0 auto;padding:12px 16px;display:flex;
    align-items:center;gap:18px;flex-wrap:wrap}
  .brand{display:flex;align-items:baseline;gap:9px}
  .brand b{font-family:'Saira';font-weight:700;font-size:19px;letter-spacing:.04em}
  .brand span{font-family:'Saira';font-weight:500;color:var(--brass);font-size:13px;
    letter-spacing:.18em;text-transform:uppercase}
  .head-meta{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap;
    font-family:'IBM Plex Mono';font-size:11px;color:#9aa1a8}
  .head-meta b{color:#dfe3e6;font-weight:500;display:block;font-size:12px}

  /* Process spine */
  .spine-shell{background:var(--steel);border-bottom:1px solid #000;padding:14px 0}
  .spine{max-width:1180px;margin:0 auto;padding:0 16px;display:flex;gap:6px;
    overflow-x:auto;scrollbar-width:thin}
  .station{flex:1 0 132px;background:var(--steel-2);border:1px solid #11151a;
    border-radius:var(--r);padding:9px 10px;cursor:pointer;position:relative;
    transition:transform .12s,border-color .12s;min-width:132px}
  .station:hover{transform:translateY(-2px)}
  .station.active{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
  .station .code{font-family:'Saira';font-weight:700;font-size:22px;color:#e8eaec;
    line-height:1;letter-spacing:.02em}
  .station .nm{font-size:10.5px;color:#9aa1a8;margin-top:3px;line-height:1.25;
    height:26px;overflow:hidden}
  .station .dot{position:absolute;top:10px;right:10px;width:11px;height:11px;
    border-radius:50%;background:#454d55;border:1px solid #11151a}
  .dot.v{background:var(--verde)} .dot.a{background:var(--amarillo)}
  .dot.r{background:var(--rojo)}
  .station .crit{position:absolute;bottom:8px;right:9px;font-family:'IBM Plex Mono';
    font-size:8.5px;color:var(--brass);letter-spacing:.08em}

  /* Work surface */
  .surface{background:var(--paper);border-radius:0 0 6px 6px;margin-top:0;
    border:1px solid var(--line);border-top:none}
  .cols{display:grid;grid-template-columns:1fr 340px;gap:0}
  @media(max-width:880px){.cols{grid-template-columns:1fr}}
  .pane{padding:22px}
  .pane.left{border-right:1px solid var(--line)}
  @media(max-width:880px){.pane.left{border-right:none;border-bottom:1px solid var(--line)}}

  .eyebrow{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted)}
  .op-title{font-family:'Saira';font-weight:600;font-size:25px;margin:3px 0 2px;
    display:flex;align-items:baseline;gap:11px}
  .op-title .opc{color:var(--teal)}
  .criterio{color:#3c434a;font-size:13.5px;line-height:1.5;margin:9px 0 18px;
    padding:11px 13px;background:var(--paper-2);border-left:3px solid var(--aluminium);
    border-radius:0 var(--r) var(--r) 0}

  label.fld{display:block;font-size:12px;color:var(--muted);margin:14px 0 5px;
    font-weight:500}
  .piece-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
  .ptab{font-family:'IBM Plex Mono';font-size:12px;padding:6px 11px;border:1px solid var(--line);
    background:#fff;border-radius:var(--r);cursor:pointer;display:flex;gap:7px;align-items:center}
  .ptab.on{border-color:var(--ink);background:var(--ink);color:#fff}
  .ptab .pdot{width:8px;height:8px;border-radius:50%;background:#cfd4cf}
  .ptab .pdot.full{background:var(--verde)}

  .verdicts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:4px}
  .vbtn{padding:15px 8px;border:1.5px solid var(--line);background:#fff;border-radius:var(--r);
    cursor:pointer;text-align:center;font-weight:600;font-size:13px;transition:all .1s;
    display:flex;flex-direction:column;gap:6px;align-items:center}
  .vbtn .sw{width:26px;height:26px;border-radius:50%}
  .vbtn[data-v=v] .sw{background:var(--verde)} .vbtn[data-v=a] .sw{background:var(--amarillo)}
  .vbtn[data-v=r] .sw{background:var(--rojo)}
  .vbtn.sel[data-v=v]{border-color:var(--verde);background:#eaf6ee}
  .vbtn.sel[data-v=a]{border-color:var(--amarillo);background:#fbf4dd}
  .vbtn.sel[data-v=r]{border-color:var(--rojo);background:#fbeae8}
  .vbtn:disabled{opacity:.4;cursor:not-allowed}

  input[type=text],input[type=number]{width:100%;padding:11px 12px;border:1px solid var(--line);
    border-radius:var(--r);font-family:'IBM Plex Mono';font-size:14px;background:#fff}
  input:focus{outline:2px solid var(--teal);outline-offset:-1px}
  .meas-row{display:flex;gap:10px;align-items:flex-end}
  .meas-row>div:first-child{flex:1}
  .auto-verdict{font-family:'IBM Plex Mono';font-size:12px;padding:11px 13px;border-radius:var(--r);
    min-width:128px;text-align:center;font-weight:600;white-space:nowrap}
  .nominal{font-family:'IBM Plex Mono';font-size:11px;color:var(--muted);margin-top:6px}

  .file-zone{border:1px dashed var(--aluminium);border-radius:var(--r);padding:13px;
    display:flex;align-items:center;gap:12px;background:#fff;cursor:pointer}
  .file-zone .hash{font-family:'IBM Plex Mono';font-size:10.5px;color:var(--teal);
    word-break:break-all;line-height:1.4}
  .save-row{margin-top:20px;display:flex;gap:10px;align-items:center}
  .btn{font-family:'Saira';font-weight:600;letter-spacing:.03em;font-size:14px;
    padding:12px 20px;border-radius:var(--r);border:none;cursor:pointer}
  .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{background:#000}
  .btn-teal{background:var(--teal);color:#fff} .btn-teal:hover{filter:brightness(1.08)}
  .btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
  .btn:disabled{opacity:.45;cursor:not-allowed}
  .saved-tag{font-size:12px;color:var(--verde);font-weight:600;display:none}
  .saved-tag.show{display:inline}

  /* Right pane — lot */
  .pane.right{background:var(--paper-2)}
  .lot-h{font-family:'Saira';font-weight:600;font-size:16px;margin-bottom:3px}
  .lot-matrix{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
  .lot-matrix table{width:100%;border-collapse:collapse;font-size:11px}
  .lot-matrix th{background:var(--steel);color:#cfd4cf;font-family:'IBM Plex Mono';
    font-weight:500;font-size:10px;padding:7px 4px;letter-spacing:.03em}
  .lot-matrix td{text-align:center;padding:6px 3px;border-top:1px solid var(--paper-2)}
  .lot-matrix td.pc{font-family:'IBM Plex Mono';text-align:left;padding-left:9px;color:var(--muted)}
  .cell{width:14px;height:14px;border-radius:3px;background:#e4e7e3;display:inline-block}
  .cell.v{background:var(--verde)} .cell.a{background:var(--amarillo)} .cell.r{background:var(--rojo)}
  .prog{font-family:'IBM Plex Mono';font-size:11px;color:var(--muted);margin-top:12px}
  .seal-btn{margin-top:16px;width:100%}

  /* Certificate — the signature element */
  .cert-backdrop{position:fixed;inset:0;background:rgba(10,12,15,.74);z-index:50;
    display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:34px 14px}
  .cert-backdrop.show{display:flex}
  .cert{max-width:560px;width:100%;background:#fbfaf6;border-radius:6px;overflow:hidden;
    box-shadow:0 24px 70px rgba(0,0,0,.5);position:relative}
  .cert-top{background:var(--graphite);color:#eef0f1;padding:20px 24px;
    display:flex;justify-content:space-between;align-items:flex-start;
    border-bottom:3px solid var(--brass)}
  .cert-top .t{font-family:'Saira';font-weight:600;font-size:18px;letter-spacing:.02em}
  .cert-top .s{font-family:'IBM Plex Mono';font-size:10.5px;color:#9aa1a8;
    letter-spacing:.14em;text-transform:uppercase}
  .seal-stamp{width:60px;height:60px;border-radius:50%;border:2px solid var(--brass);
    color:var(--brass);display:flex;flex-direction:column;align-items:center;
    justify-content:center;font-family:'Saira';font-weight:700;line-height:.95;
    flex:0 0 auto;text-align:center}
  .seal-stamp small{font-family:'IBM Plex Mono';font-weight:400;font-size:7px;
    letter-spacing:.1em;margin-top:2px}
  .cert-body{padding:22px 24px}
  .cert-summary{display:flex;gap:18px;margin-bottom:18px;flex-wrap:wrap}
  .cs-item{font-family:'IBM Plex Mono'}
  .cs-item .big{font-family:'Saira';font-weight:700;font-size:26px;line-height:1}
  .cs-item .lbl{font-size:10px;color:var(--muted);letter-spacing:.1em;
    text-transform:uppercase;margin-top:3px}
  .cs-item.v .big{color:var(--verde)} .cs-item.a .big{color:var(--amarillo)}
  .cs-item.r .big{color:var(--rojo)}
  .crow{border-top:1px solid #e7e4da;padding:11px 0;display:grid;
    grid-template-columns:118px 1fr;gap:10px;align-items:baseline}
  .crow .k{font-family:'IBM Plex Mono';font-size:11px;color:var(--muted);
    letter-spacing:.04em;text-transform:uppercase}
  .crow .val{font-family:'IBM Plex Mono';font-size:11.5px;word-break:break-all;
    line-height:1.45;color:var(--ink)}
  .crow .val.ok{color:var(--teal)}
  .badge{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono';
    font-size:11px;padding:3px 9px;border-radius:20px;font-weight:500}
  .badge.anc{background:#e3f2f3;color:var(--teal)}
  .badge.pend{background:#fbf4dd;color:var(--brass-deep)}
  .cert-actions{padding:16px 24px 22px;display:flex;gap:10px;flex-wrap:wrap;
    border-top:1px solid #e7e4da;background:#f4f2ea}
  .verdict-line{font-family:'IBM Plex Mono';font-size:13px;padding:11px 14px;
    border-radius:var(--r);margin:0 24px 18px;display:none}
  .verdict-line.ok{display:block;background:#eaf6ee;color:#136b3d;border:1px solid #bfe3cc}
  .verdict-line.bad{display:block;background:#fbeae8;color:#9b241b;border:1px solid #efbcb6}
  .x{position:absolute;top:14px;right:16px;color:#9aa1a8;font-size:22px;cursor:pointer;
    background:none;border:none;z-index:2}

  .demo-flag{font-family:'IBM Plex Mono';font-size:10.5px;color:var(--brass-deep);
    background:#fbf4dd;border:1px solid #ecdca6;border-radius:var(--r);padding:8px 11px;
    margin:16px 0 0;line-height:1.5}
  .foot{color:#7d848b;font-family:'IBM Plex Mono';font-size:11px;text-align:center;
    padding:22px 16px 0;line-height:1.6}

/* ── v2: barra de lote + modal de lista ── */
.apv-lotbar{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:#1f262c;color:#e8eaec;padding:10px 16px;border-radius:6px 6px 0 0;flex-wrap:wrap}
.lb-left{display:flex;align-items:center;gap:10px}
.lb-label{font-family:'IBM Plex Mono';font-size:11px;color:#9aa1a8;letter-spacing:.12em;text-transform:uppercase}
.lb-id{font-family:'IBM Plex Mono';font-size:14px;font-weight:600}
.lb-state{font-family:'IBM Plex Mono';font-size:11px;padding:3px 10px;border-radius:20px}
.lb-state.open{background:#3a434b;color:#e0c060}.lb-state.sealed{background:#0e7c86;color:#fff}
.lb-right{display:flex;gap:8px}
.apv-lotbar .btn-ghost{color:#e8eaec;border-color:#3a434b}
.apv-modal{position:fixed;inset:0;background:rgba(10,12,15,.7);z-index:60;display:none;
  align-items:flex-start;justify-content:center;padding:50px 16px}
.apv-modal.show{display:flex}
.apv-modal-card{background:#fff;border-radius:6px;max-width:480px;width:100%;padding:22px;position:relative}
.apv-modal-card h3{font-family:'Saira';font-weight:600;margin-bottom:14px}
.list-rows{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto}
.list-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:11px 13px;border:1px solid var(--line);border-radius:4px;cursor:pointer;font-size:13px}
.list-row:hover{border-color:var(--ink);background:var(--paper-2)}
.list-row .st-sealed{color:#0e7c86;font-weight:600;font-family:'IBM Plex Mono';font-size:11px}
.list-row .st-open{color:#8a6724;font-family:'IBM Plex Mono';font-size:11px}

/* QR del certificado */
.cert-qr{display:flex;align-items:center;gap:16px;padding:16px 24px;border-top:1px solid #e7e4da;background:#fbfaf6}
.cert-qr #certQr{flex:0 0 auto;background:#fff;padding:6px;border:1px solid #e7e4da;border-radius:4px;line-height:0}
.cert-qr #certQr img,.cert-qr #certQr canvas{display:block}
.cqr-label{font-family:'IBM Plex Mono';font-size:11px;color:#6b7178;line-height:1.5}
.cqr-label .mono{color:#0e7c86;word-break:break-all;font-size:10px}