* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0E1013; overflow: hidden; cursor: none; }
#stage { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
.board {
  width: 1920px; height: 1080px; flex: 0 0 auto; transform-origin: center center;
  background: #F3F1EC; color: #1A1D21; display: flex; flex-direction: column; overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.mono { font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace; }

.hd { background: #1A1D21; color: #fff; padding: 22px 56px 18px; display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.kicker { font-size: 18px; letter-spacing: .1em; text-transform: uppercase; color: #C9CDD3; }
.cat { font-size: 54px; font-weight: 800; line-height: 1.05; margin-top: 4px; }
.hd-right { display: flex; align-items: center; gap: 44px; }
.pager { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.page { font-size: 34px; font-weight: 700; }
.next { font-size: 20px; color: #C9CDD3; }
.updated { font-size: 20px; color: #E3E5E8; text-align: right; }
.stale { margin-top: 6px; font-size: 16px; color: #F5B66B; font-weight: 700; }
.bar { height: 10px; background: #33383F; }
.bar-fill { height: 10px; background: #3FA7A0; width: 100%; transition: width 1s linear; }

.stats { padding: 22px 56px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.stat { background: #fff; border: 1px solid #D6D2CA; border-radius: 14px; padding: 14px 24px; display: flex; align-items: center; gap: 20px; }
.stat .num { font: 700 52px/1 ui-monospace, Menlo, Consolas, monospace; }
.stat .lbl { font-size: 24px; font-weight: 700; line-height: 1.2; }

.cols { padding: 22px 56px; flex: 1 1 auto; display: flex; gap: 28px; min-height: 0; }
.panel { background: #fff; border: 1px solid #D6D2CA; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.panel.open { flex: 2.3 1 0; }
.panel.done { flex: 1 1 0; }
.panel-hd { padding: 14px 28px; font-size: 26px; font-weight: 800; border-bottom: 1px solid #D6D2CA; }
.panel-hd .sub { font-weight: 400; color: #4A5059; font-size: 20px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 230px 220px 120px 200px; gap: 16px; padding: 12px 28px; align-items: center; border-top: 1px solid #ECE9E3; }
.grid.head { background: #F7F5F1; border-top: 0; padding-top: 10px; padding-bottom: 10px; font-size: 16px; font-weight: 700; color: #4A5059; text-transform: uppercase; letter-spacing: .05em; }
.tnum { font: 600 19px ui-monospace, Menlo, Consolas, monospace; color: #4A5059; }
.ttext { font-size: 23px; font-weight: 700; line-height: 1.25; }
.dept { font-size: 19px; color: #33383F; }
.status { justify-self: start; border-radius: 999px; padding: 6px 16px; font-size: 19px; font-weight: 800; border: 2px solid; white-space: nowrap; }
.st-Received { background: #ECE9E3; color: #1A1D21; border-color: #8A8F96; }
.st-Under-review { background: #FDE7C7; color: #6B3500; border-color: #C2410C; }
.st-In-progress { background: #0E6A6A; color: #fff; border-color: #0E6A6A; }
.date { font-size: 21px; color: #33383F; }
.est { font-size: 21px; font-weight: 800; }
.pending { font-size: 20px; font-style: italic; color: #6B7079; }
.empty { padding: 22px 28px; font-size: 22px; color: #4A5059; }

.done-row { display: flex; gap: 16px; padding: 14px 28px; border-top: 1px solid #ECE9E3; align-items: flex-start; }
.check { flex: 0 0 auto; margin-top: 2px; }
.done-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.done-text .ttext { font-size: 20px; }
.dates { font-size: 17px; color: #4A5059; }

.ft { background: #fff; border-top: 1px solid #D6D2CA; padding: 14px 56px; display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.ft-left { display: flex; flex-direction: column; gap: 10px; }
.seq { display: flex; gap: 8px; flex-wrap: wrap; }
.seq span { border-radius: 999px; padding: 6px 14px; font-size: 16px; font-weight: 700; border: 1px solid #C7C2B8; color: #4A5059; background: #fff; }
.seq span.on { background: #1A1D21; color: #fff; border-color: #1A1D21; }
.note { font-size: 17px; color: #4A5059; }
.ft-right { display: flex; align-items: center; gap: 20px; }
.scan { text-align: right; }
.scan-en { font-size: 24px; font-weight: 800; }
.scan-es { font-size: 21px; color: #4A5059; }
.scan-url { font-size: 18px; color: #4A5059; margin-top: 2px; }
.qr { width: 120px; height: 120px; image-rendering: pixelated; }