/* ══════════════════════════════════════════════════════════════════════
   La mesa and El registro (DECISIONS 145): two scenes on the public page.

   Same tokens as public.css (Obsidiana), no new colour. Vermilion (--lit) still means "a person
   must decide": here it is the barrier at the gate and the squares waiting for a signature, and
   nothing else. A returned thing is ochre (--flag), a signed one is green (--signed), and the
   sample signature is blue (--info) like every specimen, so nothing on this page can be taken for a
   real one. Colour is never the only cue: squares also differ by shape.

   La mesa is stacked by default. mesa.js turns it into a rail (data-mode="rail") only when the
   visitor has not asked for reduced motion, and "Ver todo seguido" turns it back. Without the
   script nothing here is hidden or locked.
   ══════════════════════════════════════════════════════════════════════ */

/* ── La mesa ─────────────────────────────────────────────────────────── */

.mesa__sample {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3);
  margin: 0 0 var(--s5); font-size: 14px; color: var(--text-2);
}
.mesa__sample b {
  padding: 2px var(--s2); border: 1px solid var(--info); border-radius: var(--r-1);
  color: var(--info); font: 600 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}

.mesa__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0 0 var(--s4); }
.mesa__bar[hidden] { display: none; }
.mesa__go, .mesa__all {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--bg-3); color: var(--text);
  font: 600 14px/1 var(--ui); cursor: pointer;
}
.mesa__go svg { width: 20px; height: 20px; }
.mesa__flip { transform: scaleX(-1); }
.mesa__go:hover, .mesa__all:hover { background: var(--bg-4); border-color: var(--text-3); }
.mesa__go:disabled { opacity: .45; cursor: default; }
.mesa__all { margin-left: auto; padding: 0 var(--s4); }
.mesa__all[aria-pressed="true"] { background: var(--bg-4); border-color: var(--text-3); }
.mesa__count { margin: 0; min-width: 8.5rem; text-align: center; font: 500 14px/1.2 var(--mono); color: var(--text-2); }
.mesa__hint {
  margin: 0 0 var(--s3); padding: var(--s3) var(--s4); border-left: 3px solid var(--lit);
  background: var(--lit-wash); border-radius: 0 var(--r-2) var(--r-2) 0; font-size: 14px; color: var(--text);
}
.mesa__hint[hidden] { display: none; }

.mesa__track {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.mesa[data-mode="rail"] .mesa__track {
  display: flex; align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--s1); padding: var(--s1) var(--s1) var(--s4);
}
.mesa__track:focus-visible { outline-offset: 2px; }

.seat {
  position: relative; display: flex; flex-direction: column; gap: var(--s3);
  min-width: 0; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--bg-2);
}
.mesa[data-mode="rail"] .seat { flex: 0 0 min(24rem, calc(100% - var(--s7))); scroll-snap-align: start; }
.seat.is-on { border-color: var(--line-2); box-shadow: var(--lift); }
.seat > * { margin: 0; }
.seat h3 { font: 600 1.3rem/1.2 var(--display); letter-spacing: -.02em; }
.seat p { color: var(--text-2); }
.seat__n { font: 500 14px/1.2 var(--mono); letter-spacing: .04em; color: var(--text-3) !important; }
.seat q { quotes: "«" "»"; color: var(--text); }
.seat__eg { padding-top: var(--s3); border-top: 1px solid var(--line); margin-top: auto !important; font-size: 14px; }
.seat__eg b { display: block; margin-bottom: var(--s1); font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }

/* The reviewer's turn: sent back with a reason, fixed, passed. Ochre is the return. */
.seat__log { list-style: none; margin: auto 0 0; padding: var(--s3) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--s3); font-size: 14px; }
.seat__log li { display: grid; gap: var(--s1); padding-left: var(--s3); border-left: 3px solid var(--line-2); color: var(--text-2); }
.seat__log b { color: var(--text); }
.seat__log .is-back { border-left-color: var(--flag); }
.seat__log .is-back b { color: var(--flag); }
.seat__log .is-ok { border-left-color: var(--signed); }
.seat__log .is-ok b { color: var(--signed); }

/* The gate: a physical stop. A barrier across the top of the sheet, vermilion while it waits. */
.seat--gate { border-color: var(--lit); padding-top: calc(var(--s5) + 14px); }
.gate__bar {
  position: absolute; inset: 0 0 auto 0; height: 14px; border-radius: var(--r-3) var(--r-3) 0 0;
  background: repeating-linear-gradient(135deg, var(--lit) 0 10px, transparent 10px 20px);
  transform-origin: left top;
}
.mesa[data-gate="open"] .seat--gate { border-color: var(--info); }
.mesa[data-gate="open"] .gate__bar { background: repeating-linear-gradient(135deg, var(--info) 0 10px, transparent 10px 20px); transform: scaleY(.4); }
.gate__draft { margin: 0; padding: var(--s3) var(--s4); border-left: 3px solid var(--line-2); background: var(--bg-3); border-radius: 0 var(--r-2) var(--r-2) 0; }
.gate__draft q { font-size: 15px; }
.gate__wait, .gate__done { display: grid; gap: var(--s3); margin-top: auto; }
.gate__who { margin: 0; padding: var(--s3) var(--s4); border: 1px dashed var(--line-2); border-radius: var(--r-2); font-size: 14px; color: var(--text) !important; }
.gate__who b { font-weight: 600; }
.gate__stamp { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin: 0; color: var(--info) !important; }
.gate__stamp b { font: 600 1.05rem/1.2 var(--display); }
.gate__stamp span { font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
/* While the rail is stopped at the gate, only the way in is shown; opened, only the result. */
.mesa[data-mode="rail"][data-gate="closed"] .gate__done { display: none; }
.mesa[data-gate="open"] .gate__wait { display: none; }
.mesa[data-mode="rail"][data-gate="closed"] .seat--after { display: none; }

/* The hold, as in the console (hold.js drives --p): blue, because this one is a specimen. */
.hold {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  width: 100%; min-height: 60px; padding: var(--s2) var(--s5) var(--s2) var(--s3);
  background: var(--bg-2); color: var(--text); border: 0; border-radius: var(--r-2);
  box-shadow: inset 0 0 0 1px var(--info); font: 600 1.0625rem/1.25 var(--ui); white-space: nowrap; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.hold__fill { position: absolute; inset: 0; z-index: -1; background: var(--info); pointer-events: none; transform: scaleX(var(--p, 0)); transform-origin: left; }
.hold__ring {
  position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: conic-gradient(var(--text) calc(var(--p, 0) * 360deg), var(--line-2) 0);
}
.hold__ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bg-2); }
.hold__ring svg { position: relative; width: 14px; height: 14px; }
.hold__label { position: relative; text-align: left; }
.hold__label::after {
  content: attr(data-on); position: absolute; inset: 0; color: var(--bg-2);
  clip-path: inset(0 calc(100% - var(--edge, 0px)) 0 0); visibility: hidden;
}
.hold[data-holding] .hold__label::after { visibility: visible; }
.hold[data-holding] { box-shadow: inset 0 0 0 2px var(--info); }
.hold__hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0; font-size: 14px; color: var(--text-2); }
.hold__hint span { flex: 1 1 14rem; min-width: 0; }
.hold__mode {
  min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line-2); border-radius: var(--r-1);
  background: none; color: var(--text-2); font: 500 14px/1 var(--ui); cursor: pointer;
}
.hold__mode[aria-pressed="true"] { background: var(--bg-4); color: var(--text); border-color: var(--text-3); }
.hold__mode[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .seat { transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
  .gate__bar { transition: transform .5s var(--ease); }
  .mesa[data-mode="rail"] .mesa__track { scroll-behavior: smooth; }
}

/* ── El registro ─────────────────────────────────────────────────────── */

.wall {
  list-style: none; margin: var(--s5) 0 0; padding: var(--s4);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(20px, 22px)); gap: 5px;
  border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-2);
}
.sq { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--bg-4); }
.sq--signed { background: var(--signed); }
.sq--signed.sq--manager { background: linear-gradient(to top, rgb(0 0 0 / .32) 0 36%, var(--signed) 36%); }
.sq--signed.sq--client { background: radial-gradient(circle, var(--bg-2) 0 2.5px, var(--signed) 3px); }
.sq--signed.sq--unknown { background: repeating-linear-gradient(45deg, var(--signed) 0 3px, transparent 3px 6px); }
.sq--returned { background: linear-gradient(135deg, var(--flag) 0 62%, var(--bg-4) 62%); }
.sq--awaiting { background: transparent; box-shadow: inset 0 0 0 2px var(--lit); }

.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s4); margin: var(--s5) 0 0; }
.legend__i { display: grid; gap: var(--s1); margin: 0; }
.legend dt { display: flex; align-items: center; gap: var(--s2); font-size: 14px; color: var(--text-2); }
.legend dd { margin: 0; font: 600 clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem)/1.1 var(--display); letter-spacing: -.03em; }
.legend .sq { display: inline-block; width: 14px; height: 14px; flex: none; }
.signers { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: 14px; color: var(--text-2); }
.signers li { display: inline-flex; align-items: center; gap: var(--s2); }
.signers b { color: var(--text); }
.signers .sq { width: 14px; height: 14px; flex: none; }

.how { margin-top: var(--s5); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-2); }
.how summary { min-height: 48px; display: flex; align-items: center; padding: 0 var(--s5); font: 600 15px/1.2 var(--ui); cursor: pointer; }
.how ul { margin: 0; padding: 0 var(--s5) var(--s5) calc(var(--s5) + 1.1rem); display: grid; gap: var(--s3); color: var(--text-2); font-size: 15px; max-width: 48rem; }

@media (max-width: 560px) {
  .mesa__all { margin-left: 0; flex: 1 1 100%; }
  .mesa__count { flex: 1 1 auto; }
}

/* The film is vertical (9:16): a phone-sized frame, never taller than the screen. */
.mesa__film { display: block; width: auto; height: min(80svh, 860px); max-width: 100%; aspect-ratio: 9 / 16; margin: var(--s5) auto; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-2); object-fit: contain; }
.mesa__more > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; color: var(--info); font-size: 15px; }
.mesa__more > summary::-webkit-details-marker { display: none; }
.mesa__more[open] > summary { margin-bottom: var(--s4); }