/* Pantalla de TV: solo lectura, letra grande, fondo oscuro para no deslumbrar. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #0d1317; color: #e9eef2; overflow: hidden;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.6vw;
}
[hidden] { display: none !important; }

/* ---------- vinculación ---------- */
.pair { height: 100%; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
.pair-box { text-align: center; max-width: 80vw; }
.pair h1 { font-size: 3.6vw; font-weight: 800; }
.pair-sub { font-size: 2vw; color: #a9b6bf; margin-top: 2vh; }
.pair-code {
  font-size: 9vw; font-weight: 800; letter-spacing: 1.2vw; margin: 4vh 0; color: #fff;
  background: #16222a; border: 0.3vw solid #2db5a5; border-radius: 2vw; padding: 2vh 4vw; display: inline-block;
  font-family: Consolas, "Roboto Mono", monospace;
}
.pair-steps { text-align: left; display: inline-block; font-size: 1.9vw; line-height: 1.6; color: #d3dde3; padding-left: 2.4vw; }
.pair-steps b { color: #fff; }
.pair-note { font-size: 1.4vw; color: #7f8e98; margin-top: 3vh; }

/* ---------- tablero ---------- */
.board { height: 100%; display: flex; flex-direction: column; padding: 2.2vh 1.6vw 1.4vh; }
.head { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 0.4vw 1.6vh; }
.b-title { font-size: 2.6vw; font-weight: 800; line-height: 1.1; }
.b-date { font-size: 1.6vw; color: #a9b6bf; margin-top: 0.4vh; }
.b-clock { font-size: 5vw; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

.rooms { flex: 1 1 auto; display: flex; flex-wrap: wrap; min-height: 0; margin: -0.5vw; }
.room { display: flex; flex-direction: column; padding: 0.5vw; min-height: 0; }
.room-in { flex: 1 1 auto; display: flex; flex-direction: column; background: #151e24; border-radius: 1.2vw; overflow: hidden; min-height: 0; }
.room-h { padding: 1.2vh 1.2vw; font-size: 1.9vw; font-weight: 800; background: #1b262e; }
.room-h small { display: block; font-size: 1.1vw; font-weight: 600; color: #8d9ba5; }

.now { margin: 1.2vh 1vw 0; border-radius: 1vw; padding: 1.6vh 1.2vw; }
.now-k { font-size: 1.1vw; font-weight: 800; letter-spacing: 0.1vw; text-transform: uppercase; opacity: .85; }
.now-n { font-size: 2.3vw; font-weight: 800; line-height: 1.15; margin-top: 0.4vh; }
.now-s { font-size: 1.35vw; opacity: .9; margin-top: 0.3vh; }
.now-t { font-size: 1.5vw; font-weight: 700; margin-top: 0.8vh; }
.bar { height: 0.8vh; background: rgba(255,255,255,.18); border-radius: 1vh; margin-top: 1vh; overflow: hidden; }
.bar i { display: block; height: 100%; background: #fff; border-radius: 1vh; }
.now.busy { color: #fff; }
.now.free { background: #12342c; color: #b7f0dd; }
.now.prep { background: #2a2f33; color: #d6dde2; }
.now.closed { background: #22282d; color: #9aa7b0; }

.next { flex: 1 1 auto; overflow: hidden; padding: 1.4vh 1.2vw 1vh; min-height: 0; }
.next-k { font-size: 1.05vw; font-weight: 800; letter-spacing: 0.1vw; text-transform: uppercase; color: #7f8e98; margin-bottom: 0.6vh; }
.item { display: flex; align-items: baseline; padding: 0.9vh 0; border-top: 0.1vw solid #24313a; }
.item:first-of-type { border-top: 0; }
.dot { flex: 0 0 auto; width: 1vw; height: 1vw; border-radius: 50%; margin-right: 0.8vw; position: relative; top: 0.1vw; }
.item-t { flex: 0 0 auto; font-size: 1.7vw; font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 0.9vw; }
.item-x { min-width: 0; font-size: 1.6vw; line-height: 1.25; }
.item-x span { display: block; font-size: 1.2vw; color: #8d9ba5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more { font-size: 1.15vw; color: #8d9ba5; padding-top: 0.6vh; }
.none { font-size: 1.3vw; color: #6f7e88; }

.foot { display: flex; justify-content: space-between; font-size: 1.05vw; color: #6f7e88; padding: 1.2vh 0.4vw 0; }
.foot .warn { color: #ffb4a8; font-weight: 700; }

.msg { position: fixed; left: 50%; bottom: 4vh; transform: translateX(-50%); background: #3a1d1a; color: #ffd2cb; font-size: 1.5vw; padding: 1.4vh 2vw; border-radius: 1vw; }

/* Pantallas en vertical */
@media (orientation: portrait) {
  body { font-size: 2.6vw; }
  .b-title { font-size: 4.4vw; } .b-date { font-size: 2.6vw; } .b-clock { font-size: 8vw; }
  .room-h { font-size: 3.2vw; } .room-h small { font-size: 2vw; }
  .now-k, .next-k { font-size: 1.9vw; } .now-n { font-size: 4vw; } .now-s { font-size: 2.3vw; } .now-t { font-size: 2.6vw; }
  .item-t { font-size: 2.5vw; } .item-x { font-size: 2.3vw; } .item-x span { font-size: 1.9vw; } .dot { width: 1.8vw; height: 1.8vw; }
  .more, .none { font-size: 2.1vw; } .foot { font-size: 1.8vw; }
  .pair h1 { font-size: 6vw; } .pair-sub { font-size: 3.4vw; } .pair-code { font-size: 13vw; } .pair-steps { font-size: 3.2vw; } .pair-note { font-size: 2.4vw; }
}