:root{
  --paper:#F2F3F1; --card:#FFFFFF; --ink:#15171B; --ink-2:#3D434B; --muted:#6A717A;
  --line:#DCDFE2; --line-2:#C4C9CE;
  --vis:#FFD21F; --vis-ink:#15171B; --vis-soft:#FFF4C2;
  --good:#2F7350; --good-soft:#E1EFE6;
  --warn:#9A6414; --warn-soft:#F5EBD9;
  --bad:#B3342B; --bad-soft:#F7E1DF;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --paper:#111316; --card:#1A1D22; --ink:#ECEEF0; --ink-2:#BCC2C8; --muted:#8B939B;
    --line:#2A2F36; --line-2:#3A4049; --vis-soft:#3A3212;
    --good:#6FBF92; --good-soft:#15291F; --warn:#DDA852; --warn-soft:#2E2413; --bad:#E57B72; --bad-soft:#35191A;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;padding-inline:16px;padding-block:0 40px;padding-top:env(safe-area-inset-top,0px)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-stretch:112%;letter-spacing:-.01em;text-wrap:balance;margin:0}
a{color:inherit}
.btn{appearance:none;border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:10px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-size:15.5px}
.btn:hover{filter:brightness(1.18)}
.btn.vis{background:var(--vis);border-color:var(--vis);color:var(--vis-ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ink);filter:none}
.btn.small{padding:7px 12px;font-size:14px;border-radius:8px}
.btn.tiny{padding:3px 8px;font-size:12.5px;border-radius:6px}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.linkbtn{appearance:none;background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:14px;padding:6px 0}
.field{display:grid;gap:5px}
.field label{font-size:13.5px;font-weight:600}
.field small{color:var(--muted);font-size:12.5px}
.field input,.field select,.field textarea{padding:11px 12px;border:1.5px solid var(--line-2);border-radius:10px;background:var(--card);width:100%}
.field textarea{min-height:90px;resize:vertical}
.switch{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:15px}
.switch input{width:18px;height:18px;margin-top:2px;accent-color:var(--ink);flex:none}
.pill{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:4px;width:fit-content;letter-spacing:.03em;white-space:nowrap}
.ok{background:var(--good-soft);color:var(--good)} .due{background:var(--warn-soft);color:var(--warn)} .late{background:var(--bad-soft);color:var(--bad)}
.note{font-size:14px;color:var(--muted);min-height:1em}
.note.good{color:var(--good)} .note.bad{color:var(--bad)}
.alertbox{background:var(--bad-soft);color:var(--bad);border-radius:12px;padding:12px 14px;font-size:14.5px}
.infobox{background:var(--vis-soft);color:var(--ink);border-radius:12px;padding:12px 14px;font-size:14.5px}
.logo{display:inline-block;width:32px;height:32px}
.logo svg{width:100%;height:100%;display:block}
.spin{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .8s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}}