:root{
  --bg:#EDEFEB; --surface:#FFFFFF; --ink:#1B2320; --muted:#5A6560; --line:#D3D8D2; --line2:#AEB6AF; --sel:#E3B023;
  --crit:#C2301D; --crit-bg:#FBE2DD; --ok:#1D5BC0; --ok-bg:#DDE8FB; --plus:#1A7F45; --plus-bg:#DAF1E2;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#131816; --surface:#1C2320; --ink:#E8ECE9; --muted:#9BA6A0; --line:#303934; --line2:#4A554F; --sel:#F0C445;
  --crit:#FF7C68; --crit-bg:#45201A; --ok:#82B0FF; --ok-bg:#1A2C4B; --plus:#62D28F; --plus-bg:#173625;
  color-scheme:dark } }

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--body)}
.wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px;
  padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}
h1,h2{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-size:24px;font-weight:700} h2{font-size:18px;font-weight:600}
p{margin:0}
code{font-family:var(--mono);font-size:.9em}
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted);font-size:14px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px}
:focus-visible{outline:2px solid var(--sel);outline-offset:2px}

.head{display:flex;gap:12px;align-items:flex-end;justify-content:space-between}
.marca{display:flex;align-items:center;gap:12px;min-width:0}
.marca img{flex:none;height:auto}
.marca>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.col{display:flex;flex-direction:column;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.ph{display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:space-between;align-items:center}
.sett{display:flex;gap:8px;align-items:center}

.fld{display:flex;flex-direction:column;gap:5px;font-size:14px;color:var(--muted);flex:1 1 180px;min-width:0}
.chk{display:flex;gap:8px;align-items:center;flex:1 1 220px;font-size:15px;min-height:44px}
input,select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line2);border-radius:4px;padding:10px;min-width:0;width:100%}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--ink);flex:none}
button{font:inherit;cursor:pointer}
.btn{font:600 15px/1 var(--body);padding:12px 14px;border-radius:4px;border:1px solid var(--ink);background:var(--ink);color:var(--bg)}
.btn.sec{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn:disabled{opacity:.5;cursor:default}

.msg{font-size:14px;padding:10px 12px;border-radius:4px;background:var(--ok-bg);color:var(--ok)}
.msg.err{background:var(--crit-bg);color:var(--crit)}
.msg:empty{display:none}

.disp{display:flex;flex-direction:column}
.giorno{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid var(--line)}
.fasce{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.giorno:first-child{border-top:0}
.giorno b{font:600 15px var(--display)}
.giorno small{color:var(--muted);font-size:13px}
.fascia{font:600 13px/1 var(--body);padding:14px 2px;min-width:0;font-variant-numeric:tabular-nums;border-radius:4px;border:1px solid var(--line2);background:transparent;color:var(--muted)}
.fascia[aria-pressed="true"]{background:var(--plus-bg);color:var(--plus);border-color:var(--plus)}
.fascia:disabled{opacity:.45;cursor:default}

.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font:500 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px;border-bottom:1px solid var(--line2);white-space:nowrap}
td{padding:8px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.perm{display:inline-flex;gap:6px;align-items:center;margin-left:10px;font-size:13px}
td select{width:auto}
.tag{font:600 12px/1 var(--body);padding:5px 8px;border-radius:4px;background:var(--plus-bg);color:var(--plus)}
.tag.no{background:var(--crit-bg);color:var(--crit)}