:root{
  --bg:#f4f5f8; --card:#fff; --ink:#1c1f26; --muted:#6b7280;
  --brand:#3F51B5; --brand-d:#303F9F; --accent:#FF4081;
  --ok:#1b8a2f; --bad:#d32f2f; --line:#e2e4ea;
  --radius:12px; font-size:16px;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#12141a; --card:#1b1e26; --ink:#e9eaee; --muted:#9aa0ab; --line:#2b2f3a; }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.topbar{position:sticky;top:0;display:flex;align-items:center;gap:.6rem;
  padding:.7rem 1rem;background:var(--brand);color:#fff}
.brand{font-weight:700;letter-spacing:.02em}
.who{margin-left:auto;font-size:.9rem;opacity:.9}
.link{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
main{max-width:640px;margin:0 auto;padding:1rem}
.view{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem;display:flex;flex-direction:column;gap:.9rem}
h1{font-size:1.25rem;margin:.2rem 0 .4rem}
h2{font-size:1.1rem;margin:0 0 .6rem}
label{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem;color:var(--muted)}
label.check{flex-direction:row;align-items:center;gap:.5rem;color:var(--ink)}
input,select{font:inherit;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:9px;padding:.6rem .7rem;min-height:44px}
input:focus,select:focus{outline:2px solid var(--brand);border-color:var(--brand)}
.row{display:flex;gap:.5rem}.row input{flex:1}
button{font:inherit;min-height:44px;border-radius:9px;cursor:pointer;padding:.6rem .9rem}
.primary{background:var(--brand);color:#fff;border:1px solid var(--brand-d);font-weight:600}
.primary:active{background:var(--brand-d)}
.secondary{background:var(--card);color:var(--brand);border:1px solid var(--brand)}
.outline{background:transparent;color:var(--brand);border:1px solid var(--brand)}
a.as-btn{display:block;text-align:center;text-decoration:none}
.actions{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.4rem}
.msg{margin:0;font-size:.9rem;color:var(--bad);min-height:1.2em}
.msg:not(:empty){background:#fde68a;color:#7c2d12;padding:.4rem .6rem;border-radius:8px}
.msg.ok:not(:empty){background:#bbf7d0;color:#14532d}
.hint{margin:0;font-size:.85rem;color:var(--muted)}
.pill,.samples b{font-weight:700}
.pill{display:inline-block;min-width:1.6em;text-align:center;background:var(--brand);
  color:#fff;border-radius:999px;padding:.05em .5em;font-size:.85rem}
.pill.ch{background:#b91c1c}
.lbl-row{display:flex;align-items:center;gap:.4rem}
#pesoVia{font-weight:400;font-size:.85rem}
.coladas-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
#coladasInfo{color:#991b1b;font-weight:600}
#btnAddSample{background:#991b1b;color:#fff;border-color:#7f1d1d;font-weight:700}
#btnGenerar{background:#f59e0b;color:#111;border-color:#d97706}
.samples{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.samples li{border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;
  display:flex;justify-content:space-between;gap:.6rem;align-items:flex-start}
.samples li.ident{border-left:5px solid #22c55e;background:rgba(34,197,94,.12)}
.samples li .body{flex:1;cursor:pointer}
.samples .col-lbl.fuera{color:#c026d3}
.samples .meta{font-size:.82rem;color:var(--muted)}
.samples .sbtns{display:flex;gap:.3rem;flex-shrink:0;align-items:center}
.samples .sbtns button{min-height:36px;padding:.3rem .55rem;font-size:.85rem}
.samples .sbtns .del{color:#dc2626;font-weight:700;font-size:1.1rem;text-decoration:none;line-height:1}
#dlgVer .kv{display:grid;grid-template-columns:auto 1fr;gap:.45rem .9rem;margin:.2rem 0 .6rem}
#dlgVer dt{color:var(--muted);font-size:.9rem;align-self:center}
#dlgVer dd{margin:0;font-size:1.15rem;font-weight:700}
#dlgVer .badge{display:inline-block;padding:.1em .55em;border-radius:999px;font-size:.9rem}
#dlgVer .badge.si{background:#16a34a;color:#fff}
#dlgVer .badge.no{background:var(--line);color:var(--ink)}
#dlgVer menu{display:flex;justify-content:flex-end;gap:.6rem;margin:.4rem 0 0;padding:0}
dialog{border:0;border-radius:14px;padding:1.1rem;max-width:420px;width:92%;
  background:var(--card);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.45)}
#formSample,#formOte{display:flex;flex-direction:column;gap:.7rem}
#formSample menu,#formOte menu{display:flex;justify-content:flex-end;gap:.6rem;margin:.4rem 0 0;padding:0}
#formSample small{color:var(--muted);font-size:.78rem}
#formSample select.grado{font-weight:700}
.half{display:flex;gap:.7rem;align-items:center}
.half label.pos{flex:0 0 60px;min-width:0}
.half label.pos small{display:none}
.half label.pos input{text-align:center}
.half label.check{flex:1;flex-direction:row;align-items:center;gap:.5rem;justify-content:center}
#chkId{width:22px;height:22px;accent-color:#4ade80}
.half label.dim-half{flex:1 1 50%;min-width:0}
.half label.check.charpy{flex:0 0 auto;justify-content:flex-start;color:#b91c1c;font-weight:700}
.half label.check.charpy input{accent-color:#b91c1c}
.tiporow{display:flex;gap:.5rem;align-items:stretch}
.tiporow select{flex:3;min-width:0}
.tiporow #btnStd{flex:1;min-width:56px;white-space:nowrap;font-weight:700}
#btnStd.std-on{background:#f59e0b;color:#111;border-color:#d97706}
input.dim-std{color:#c2410c;font-weight:700}
#dimHint{color:#c2410c}
input[name="peso"].peso-calc{color:#1d4ed8;font-weight:700}
#pesoCalcNote{color:#1d4ed8}
/* marco verde del screen cuando la colada es "Identificada" */
body.ident-on::after{content:"";position:fixed;inset:0;border:4px solid #16a34a;
  border-radius:4px;pointer-events:none;z-index:9999}
body.ident-on #dlgSample{border:3px solid #16a34a}
/* ── encabezado ── */
.h1sub{font-size:.8rem;font-weight:600;color:var(--muted)}
.head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem}
.head-row h1{margin:0}
.fecha-top{flex:0 0 auto;align-items:flex-end;font-size:.8rem}
.fecha-top input{min-height:38px;padding:.35rem .5rem;font-size:.85rem}
.ar-ram{display:flex;gap:.7rem}
.ar-ram > label{flex:1 1 0;min-width:0}
.ote-row{display:flex;gap:.5rem;align-items:flex-end}
.ote-row label.ote{flex:1 1 0;min-width:0}
.ote-row #btnBuscarOte{font-weight:700;flex:0 0 auto;
  background:var(--card);color:#b91c1c;border-color:#b91c1c}
#inAr,#inOte,#inRam{font-size:1rem;font-weight:700;color:#b91c1c;width:100%;min-width:0}
.sedebox #sedeFiltro{align-self:flex-end;width:62%;font-size:.72rem;text-align:center;
  color:#374151;background:#fef08a;border-color:#eab308;min-height:36px;padding:.3rem .5rem}
.sedebox #sedeFiltro::placeholder{color:#374151}
#selSede{color:#b91c1c;font-weight:700}
.hint.azul{color:#1d4ed8}
.hint.fucsia{color:#c026d3;font-weight:600}
.result{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;margin:.2rem 0 .6rem}
.result dt{color:var(--muted);font-size:.85rem}
.result dd{margin:0;font-weight:600}
#dlgResumen{max-width:96vw;width:96vw}
.tabla-scroll{overflow-x:auto;margin:0 -1.1rem;padding:0 1.1rem}
.resumen-tabla{border-collapse:collapse;width:100%;font-size:.78rem;white-space:nowrap}
.resumen-tabla th,.resumen-tabla td{padding:.35rem .5rem;border-bottom:1px solid var(--line);text-align:left}
.resumen-tabla th{color:var(--muted);font-weight:600}
.resumen-tabla td.fuera{color:#c026d3}
#resumenPie{font-weight:600;margin:.6rem 0 0}
.sedebox{display:flex;flex-direction:column;gap:.4rem}
.sedebox p{margin:0}
#viewMenu button{font-size:1.05rem;padding:.9rem}
.offline{position:fixed;left:0;right:0;bottom:0;background:#b71c1c;color:#fff;
  text-align:center;padding:.5rem;font-size:.85rem}
#working{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;
  justify-content:center;background:rgba(0,0,0,.5)}
#working .box{background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:14px;padding:1.5rem 1.7rem;display:flex;flex-direction:column;
  align-items:center;gap:1rem;max-width:280px;text-align:center;font-size:1rem}
#working .spin{width:40px;height:40px;border:4px solid var(--line);
  border-top-color:var(--brand);border-radius:50%;animation:spin 1s linear infinite}
#working p{margin:0}
@keyframes spin{to{transform:rotate(360deg)}}