:root{--ink:#0E1A2B;--ink2:#4A5568;--paper:#F6F7F9;--brass:#B8892E;--field:#2E6B4F;--seal:#B23A2E;--rule:#C9CED6;--disp:'Barlow Condensed','Arial Narrow',sans-serif;--ui:'Source Sans 3',system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.5 var(--ui);padding-bottom:5.5rem}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--brass)}
.bar :focus-visible,.login-art :focus-visible,.ctx :focus-visible{outline-color:var(--paper)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-99rem}.skip:focus{left:1rem;top:1rem;background:var(--paper);padding:.5rem;z-index:9}
h1,h2,h3,.disp{font-family:var(--disp);font-weight:600;line-height:1;margin:0}
.staff{height:37px;background:repeating-linear-gradient(var(--brass) 0 1px,transparent 1px 9px)}
.wrap{max-width:74rem;margin:0 auto;padding:0 1.25rem}
.btn{min-height:2.75rem;padding:0 1.1rem;font:600 1rem var(--ui);border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:2px;cursor:pointer}
.btn.p{background:var(--ink);color:var(--paper)}.btn.wide{width:100%;margin-top:1.25rem}.btn:disabled{opacity:.5;cursor:default}
.in{width:100%;min-height:2.75rem;padding:.5rem .75rem;border:1.5px solid var(--ink2);background:#fff;border-radius:2px;font:inherit;color:inherit;display:block}
textarea.in{resize:vertical}
.in[aria-invalid=true]{border-color:var(--seal);box-shadow:inset 4px 0 0 var(--seal)}
.in[readonly]{background:var(--paper);border-style:dashed}
.lab{display:block;font-weight:600;margin:1rem 0 .25rem}
.lab em{font-style:normal;font-weight:400;color:var(--ink2)}
.err{color:var(--seal);font-weight:600;font-size:.95rem;margin:.35rem 0 0}
.hint,.note{font-size:.95rem;color:var(--ink2);margin:.75rem 0 0}
.note{color:var(--ink);border-left:4px solid var(--brass);padding-left:.75rem}
/* login */
.login{min-height:100vh;display:grid}
.login-art{background:var(--ink);color:var(--paper);padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem}
.login-art h1{font-size:clamp(3rem,11vw,6rem);font-weight:700}
.login-art p{max-width:30rem;color:var(--rule);margin:1rem 0 0}
.login-form{width:100%;max-width:28rem;padding:2rem 1.25rem;align-self:center;justify-self:center}
.roles{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr}
.roles legend{padding:0}
.roles label{position:relative}.roles input{position:absolute;opacity:0}
.roles span{display:block;text-align:center;padding:.7rem;border:1.5px solid var(--ink);font-weight:600;cursor:pointer}
.roles label:last-child span{border-left:0}
.roles input:checked+span{background:var(--ink);color:var(--paper)}
.roles input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--brass)}
/* contexto */
.ctx{background:var(--ink);color:var(--paper);padding-top:1rem}
.ctx .btn{border-color:var(--paper);color:var(--paper)}
.ctx-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem}
.inst{font-size:1.25rem;font-weight:500;color:var(--rule)}
#sheet-t{font-size:clamp(2.4rem,8vw,4.5rem);font-weight:700}
#sheet-t:focus{outline:0;box-shadow:none}
.facts{display:flex;flex-wrap:wrap;margin:1.25rem 0 1.5rem}
.facts div{padding-right:1.5rem;margin-right:1.5rem;border-right:1px solid var(--brass)}.facts div:last-child{border:0}
.facts dt{font-size:.9rem;color:var(--rule)}.facts dd{margin:0;font-weight:600;font-size:1.15rem}
.state{display:inline-block;padding:.05rem .6rem;border:2px dashed var(--paper)}
.state.sent{background:var(--paper);color:var(--seal);border:2px solid var(--seal);font-family:var(--disp);font-size:1.3rem;font-weight:700;transform:rotate(-3deg)}
/* planilla */
.grid{display:block;padding-top:1.5rem}
.msg{min-height:1.5rem;margin:0 0 .5rem;font-weight:600}.msg.bad{color:var(--seal)}.msg.ok{color:var(--field)}
.cols{display:none}
.crit{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem;padding:1.25rem 0;border-top:1px solid var(--rule)}
.crit-i,.crit-o,.crit-s{grid-column:1/-1}
.crit h3{font-size:1.6rem}
.crit-i p{margin:.3rem 0 0;color:var(--ink2);max-width:60ch}
.crit-s{display:grid;grid-template-columns:1fr auto;align-items:center}.crit-s .step{grid-column:2}.crit-s .err{grid-column:1/-1}
.step{display:flex}.step .btn{width:2.75rem;padding:0;font-size:1.4rem}
.step .in{width:4.25rem;text-align:right;margin:0 .35rem;font-variant-numeric:tabular-nums;font-weight:600;-moz-appearance:textfield}
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lbl{font-size:.9rem;color:var(--ink2);display:block}
.num{font:700 1.6rem/1 var(--disp);font-variant-numeric:tabular-nums;text-align:right}
.crit-w .num{text-align:left}.crit-c{text-align:right}.crit-c .lbl{text-align:right}
/* resumen */
.side{display:none}
.total{display:flex;align-items:baseline;gap:.4rem;margin:0}
.total small{color:inherit;opacity:.75}
.bar{position:fixed;inset:auto 0 0;background:var(--ink);color:var(--paper);display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));border-top:3px solid var(--brass)}
.bar .total{margin-right:auto}.bar .num{font-size:2.2rem}
.bar .btn{border-color:var(--paper);color:var(--paper);padding:0 .8rem}
.bar .btn.p{background:var(--brass);border-color:var(--brass);color:var(--ink)}
/* sello */
dialog{border:0;background:none;padding:0;overflow:visible;text-align:center}
dialog::backdrop{background:rgba(14,26,43,.65)}
.seal{width:17rem;max-width:80vw;aspect-ratio:1;margin:0 auto 1.5rem;border-radius:50%;background:var(--paper);color:var(--seal);border:.4rem double var(--seal);display:grid;place-content:center;padding:1.5rem;font-weight:600;transform:rotate(-8deg);animation:thud .45s cubic-bezier(.2,.9,.3,1.15) both}
.seal b{font-size:3.6rem;text-transform:none}.seal small{font-size:.8rem}
@keyframes thud{from{transform:scale(1.8) rotate(-18deg);opacity:0}to{transform:rotate(-8deg);opacity:1}}
@media(prefers-reduced-motion:reduce){.seal{animation:none}}
@media(min-width:52rem){
  body{padding-bottom:0}.bar{display:none}
  .login{grid-template-columns:5fr 4fr}.login-art{padding:2rem 3rem 3rem;justify-content:space-between}
  .grid{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:3rem;padding-bottom:4rem}
  .cols,.crit{display:grid;grid-template-columns:minmax(0,1fr) 5rem 10rem;gap:0 1.25rem}
  .cols{border-bottom:2px solid var(--ink);padding-bottom:.4rem;font-weight:600;color:var(--ink2)}
  .cols span:nth-child(n+2){text-align:right}
  .crit-i,.crit-o,.crit-s{grid-column:auto}.crit-o{grid-column:1/-1;margin-top:.75rem}
  .crit-i{grid-row:1}.crit-w{grid-column:2;grid-row:1}.crit-s{grid-column:3;grid-row:1;align-self:start;display:block}.crit-c{grid-column:4;grid-row:1}
  .crit-w .num{text-align:right}.crit-s .step{justify-content:flex-end}
  .crit .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .side{display:block;position:sticky;top:1rem;align-self:start;border-top:3px solid var(--brass);padding-top:1rem}
  .ledger{width:100%;border-collapse:collapse;font-size:.95rem}
  .ledger th{font-weight:400;text-align:left;padding:.4rem 0;border-bottom:1px solid var(--rule)}
  .ledger td,.ledger thead th:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--rule)}
  .ledger thead th{font-weight:600;border-bottom:2px solid var(--ink)}
  .side .total{margin-top:1rem}.side .num{font-size:3.6rem}.prog{margin:.25rem 0 1rem;color:var(--ink2)}
  .acts{display:grid;gap:.6rem}
}

#bandsel{width:auto;min-width:15rem;max-width:100%}
a.btn{display:inline-flex;align-items:center;text-decoration:none}