:root{
  --ink:#171C21; --ink-70:#3A444E; --ink-45:#6B7883;
  --line:#C9D0D6; --shell:#DEE3E7; --paper:#F8F9FA;
  --signal:#EFA00B; --verify:#16706B; --alarm:#A83A22;
  --r:3px;
  --fd:'Archivo',system-ui,-apple-system,sans-serif;
  --fb:'Public Sans',system-ui,-apple-system,sans-serif;
  --fm:'Azeret Mono',ui-monospace,'SF Mono',monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--shell);color:var(--ink);font-family:var(--fb);font-size:15px;
  line-height:1.5;min-height:100vh;padding:0 0 40px}
body.msgpage{display:grid;place-items:center;padding:0}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

.wrap{max-width:452px;margin:0 auto;padding:20px 18px 0}
.wrap.wide{max-width:760px}

.topbar{background:var(--ink);color:#fff;display:flex;align-items:center;gap:10px;
  padding:9px 14px;flex-wrap:wrap;position:sticky;top:0;z-index:40}
.topbar .brand{font-family:var(--fd);font-weight:800;font-size:13px;letter-spacing:.01em}
.topbar .tag{font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);border:1px solid rgba(239,160,11,.45);padding:2px 6px;border-radius:2px}
.topbar nav{margin-left:auto;display:flex;gap:2px;background:rgba(255,255,255,.09);padding:2px;border-radius:3px}
.topbar nav button,.topbar nav a{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 10px;border-radius:2px;color:rgba(255,255,255,.62);text-decoration:none}
.topbar nav [aria-pressed="true"]{background:var(--signal);color:var(--ink);font-weight:700}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 1px 0 rgba(23,28,33,.06),0 10px 26px -18px rgba(23,28,33,.5);overflow:hidden;
  background-image:repeating-linear-gradient(0deg,rgba(23,28,33,.022) 0 1px,transparent 1px 4px)}
.card+.card{margin-top:14px}
.card-hd{border-bottom:1.5px solid var(--ink);padding:14px 16px 12px;display:flex;align-items:flex-start;gap:12px}
.punch{display:flex;flex-direction:column;gap:7px;padding-top:3px}
.punch i{display:block;width:8px;height:8px;border-radius:50%;background:var(--shell);
  box-shadow:inset 0 1px 1px rgba(23,28,33,.28)}
.kicker{font-family:var(--fm);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-45);margin:0 0 3px}
.card-hd h1{font-family:var(--fd);font-weight:800;font-size:19px;letter-spacing:-.015em;margin:0;line-height:1.15}
.card-bd{padding:16px}

dl{margin:0}
.rowline{display:flex;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px dotted var(--line);font-size:13.5px}
.rowline:last-child{border-bottom:none}
.rowline dt{color:var(--ink-45);font-size:12px}
.rowline dd{margin:0;font-family:var(--fm);font-size:12.5px;text-align:right}

.verif{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);
  margin-bottom:16px;border:1px solid;font-size:13px;line-height:1.45}
.verif b{display:block;font-family:var(--fd);font-weight:700;font-size:13px;margin-bottom:2px}
.verif.ok{background:rgba(22,112,107,.07);border-color:rgba(22,112,107,.35);color:#0E4E4A}
.verif.bad{background:rgba(168,58,34,.07);border-color:rgba(168,58,34,.38);color:#7E2B19}
.verif.warn{background:rgba(239,160,11,.09);border-color:rgba(239,160,11,.45);color:#7A5100}
.verif .ic{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--fm);font-size:12px;font-weight:700;color:#fff}
.verif.ok .ic{background:var(--verify)}
.verif.bad .ic{background:var(--alarm)}
.verif.warn .ic{background:var(--signal);color:var(--ink)}

.step{border-top:1.5px solid var(--ink);margin-top:18px;padding-top:13px}
.step:first-of-type{margin-top:4px}
.step-hd{display:flex;align-items:baseline;gap:9px;margin-bottom:10px}
.step-no{font-family:var(--fm);font-weight:700;font-size:11px;color:var(--paper);
  background:var(--ink);padding:2px 6px;border-radius:2px}
.step-hd h2{font-family:var(--fd);font-weight:700;font-size:14.5px;margin:0}
.step-hd .opt{margin-left:auto;font-family:var(--fm);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-45)}

.check{display:flex;align-items:center;gap:11px;padding:11px 12px;margin-bottom:6px;width:100%;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;text-align:left;
  transition:border-color .13s,background .13s}
.check .box{flex:0 0 20px;height:20px;border:1.5px solid var(--ink-45);border-radius:2px;
  display:grid;place-items:center;color:transparent;font-size:13px;font-weight:700;transition:.13s}
.check[data-on="true"]{border-color:var(--verify);background:rgba(22,112,107,.05)}
.check[data-on="true"] .box{background:var(--verify);border-color:var(--verify);color:#fff}
.check span:not(.box){font-size:13.5px}

.counter{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;overflow:hidden}
.counter button{width:44px;height:42px;font-family:var(--fd);font-size:19px;font-weight:700;color:var(--ink-70)}
.counter button:active{background:var(--shell)}
.counter output{flex:1;text-align:center;font-family:var(--fm);font-weight:700;font-size:15px}
.counter-lbl{margin-bottom:7px;font-size:13px}

.shot{border:1.5px dashed var(--ink-45);border-radius:var(--r);background:#fff;padding:22px 16px;text-align:center}
.shot p{margin:0 0 13px;font-size:12.5px;color:var(--ink-45);line-height:1.45}
.preview{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--ink)}
.preview img{display:block;width:100%;height:190px;object-fit:cover}
.preview .meta{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(23,28,33,.9) 45%);padding:22px 10px 8px;color:#fff;
  font-family:var(--fm);font-size:10px;display:flex;justify-content:space-between;gap:8px}
.preview .redo{position:absolute;top:8px;right:8px;background:rgba(23,28,33,.82);color:#fff;
  border-radius:2px;padding:6px 9px;font-family:var(--fm);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

textarea{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;
  font-size:13.5px;resize:vertical;min-height:64px;background:#fff}
.field{margin-bottom:9px}
.field label{display:block;font-family:var(--fm);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:4px}
.field input,.field select{width:100%;border:1px solid var(--line);border-radius:var(--r);
  padding:9px 11px;background:#fff;font-size:13.5px}

.btn-ghost{border:1.5px solid var(--ink);border-radius:var(--r);padding:10px 15px;
  font-family:var(--fd);font-weight:700;font-size:12.5px}
.btn-ghost:active{background:var(--ink);color:var(--paper)}
.btn-ghost.sm{padding:7px 11px;font-size:11.5px}
.btn-ghost.quiet{border-color:var(--line);color:var(--ink-45)}
.submit{width:100%;margin-top:20px;padding:16px;background:var(--ink);color:var(--paper);
  border-radius:var(--r);font-family:var(--fd);font-weight:800;font-size:15px;transition:.15s}
.submit:disabled{background:var(--line);color:var(--ink-45);cursor:not-allowed}
.submit:not(:disabled):active{background:var(--verify)}
.hint{text-align:center;font-size:11.5px;color:var(--ink-45);margin:9px 0 0;font-family:var(--fm)}

.stampwrap{padding:26px 16px 20px;display:grid;place-items:center;min-height:210px}
.stamp{border:3px solid var(--verify);border-radius:4px;padding:11px 17px;transform:rotate(-4.2deg);
  position:relative;color:var(--verify);text-align:center;background:rgba(22,112,107,.04);
  animation:stampdown .3s cubic-bezier(.2,1.5,.5,1) both}
.stamp::after{content:"";position:absolute;inset:3px;border:1px solid currentColor;border-radius:2px;opacity:.55}
.stamp .st-top{font-family:var(--fm);font-size:9px;letter-spacing:.24em;text-transform:uppercase;opacity:.8}
.stamp .st-main{font-family:var(--fd);font-weight:800;font-size:26px;line-height:1.1;margin:1px 0 2px}
.stamp .st-bot{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em}
.stamp.queued{border-color:var(--signal);color:#8A5B00;background:rgba(239,160,11,.07)}
@keyframes stampdown{0%{transform:rotate(-11deg) scale(1.75);opacity:0}60%{opacity:1}
  100%{transform:rotate(-4.2deg) scale(1);opacity:1}}

.chip{display:inline-block;font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 7px;border-radius:2px;border:1px solid;white-space:nowrap}
.chip.ok{color:var(--verify);border-color:rgba(22,112,107,.4);background:rgba(22,112,107,.07)}
.chip.bad{color:var(--alarm);border-color:rgba(168,58,34,.4);background:rgba(168,58,34,.07)}
.chip.wait{color:#8A5B00;border-color:rgba(239,160,11,.5);background:rgba(239,160,11,.1)}
.chip.plain{color:var(--ink-45);border-color:var(--line)}

.pin{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.pin button{padding:17px 0;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  font-family:var(--fm);font-size:19px}
.pin button:active{background:var(--ink);color:var(--paper)}
.pindots{display:flex;gap:11px;justify-content:center;margin:16px 0 2px}
.pindots i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink-45)}
.pindots i[data-f="1"]{background:var(--ink);border-color:var(--ink)}
.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

.split{display:flex;gap:9px;margin-top:16px}
.split button{flex:1;padding:15px 10px;border-radius:var(--r);font-family:var(--fd);
  font-weight:700;font-size:13.5px;border:1.5px solid}
.b-yes{background:var(--verify);border-color:var(--verify);color:#fff}
.b-no{background:#fff;border-color:var(--alarm);color:var(--alarm)}
.reasons{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.reasons button{border:1px solid var(--line);border-radius:14px;padding:8px 13px;font-size:12.5px;background:#fff}
.reasons button[aria-pressed="true"]{border-color:var(--alarm);background:rgba(168,58,34,.08);
  color:var(--alarm);font-weight:600}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:11px 10px}
.kpi b{display:block;font-family:var(--fd);font-weight:800;font-size:24px;line-height:1;letter-spacing:-.02em}
.kpi span{font-family:var(--fm);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-45);display:block;margin-top:5px}
.kpi.warn b{color:var(--alarm)}

.mrow{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--ink-45);
  border-radius:var(--r);padding:12px 13px;margin-bottom:8px}
.mrow[data-s="overdue"],.mrow[data-s="never"]{border-left-color:var(--alarm)}
.mrow[data-s="due"]{border-left-color:var(--signal)}
.mrow[data-s="ok"]{border-left-color:var(--verify)}
.mrow-t{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.mrow-t b{font-family:var(--fd);font-weight:700;font-size:14px;flex:1}
.mrow-m{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--ink-45)}
.mrow-m .code{font-family:var(--fm);font-size:10.5px}
.bar{height:4px;background:var(--shell);border-radius:2px;overflow:hidden;margin-top:9px}
.bar i{display:block;height:100%;background:var(--verify)}
.mrow[data-s="due"] .bar i{background:var(--signal)}
.mrow[data-s="overdue"] .bar i,.mrow[data-s="never"] .bar i{background:var(--alarm)}

.log{list-style:none;margin:0;padding:0}
.log li{padding:11px 0;border-bottom:1px dotted var(--line);display:flex;gap:11px;align-items:flex-start}
.log li:last-child{border-bottom:none}
.log .when{font-family:var(--fm);font-size:11px;color:var(--ink-45);flex:0 0 76px;padding-top:1px}
.log .what{flex:1;font-size:13px;line-height:1.4;min-width:0}
.log .what b{font-family:var(--fd);font-weight:700;font-size:13px;display:block}
.log .what small{color:var(--ink-45);font-size:11.5px}

.sect-t{font-family:var(--fm);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-45);margin:22px 0 9px;padding-bottom:6px;border-bottom:1.5px solid var(--ink);
  display:flex;align-items:center;gap:10px}
.sect-t .act{margin-left:auto;letter-spacing:.08em}
.note{font-size:11.5px;color:var(--ink-45);line-height:1.5;border-left:2px solid var(--line);
  padding-left:11px;margin-top:18px}
.note code{font-family:var(--fm);font-size:10.5px;background:rgba(23,28,33,.06);padding:1px 4px;border-radius:2px}
.empty{text-align:center;padding:34px 16px;color:var(--ink-45);font-size:13px}
.empty b{display:block;font-family:var(--fd);font-weight:700;color:var(--ink);font-size:14px;margin-bottom:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media (max-width:520px){.kpis{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}