/* Pasillo: pantalla de sala para tele o tablet, en cualquier tamaño y orientación. 1u = 1 % del ancho de una 16:9 de la misma altura. */
body[data-page="house"] {
  --u: min(1vw, 1.778vh);
  --safe-x: 5vw;
  --safe-y: 5vh;
  --tone: #7ee2a8;
  background: var(--navy);
  color: #fff;
  height: 100dvh;
  overflow: hidden;
  padding: 0;
  color-scheme: dark;
  transition: background-color .8s;
}
@media (max-aspect-ratio: 1/1) { body[data-page="house"] { --u: min(1.778vw, 1vh); } }
body[data-page="house"]:has(#stage[data-state="busy"]) { --tone: #ffb08a; background: #1a1230; }
body[data-page="house"]:has(#stage[data-state="free"]) { --tone: #7ee2a8; }
body[data-page="house"]:has(#stage[data-state="loading"]) { --tone: rgba(255,255,255,.4); }
.screen {
  height: 100%;
  padding: var(--safe-y) var(--safe-x);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: calc(var(--u) * 2);
  transform: translate(var(--bx, 0px), var(--by, 0px));
  transition: transform 8s ease-in-out;
}
body[data-page="house"] .top { padding: 0; border: 0; }
body[data-page="house"] .brand { display: flex; align-items: center; gap: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2); }
body[data-page="house"] .brand b { display: block; font-size: calc(var(--u) * 2.2); }
body[data-page="house"] .brand small { font-size: calc(var(--u) * 1.4); color: rgba(255,255,255,.78); }
body[data-page="house"] .brand .badge { width: auto; height: auto; font-size: calc(var(--u) * 2.4); padding: calc(var(--u) * .4) calc(var(--u) * .9); border-radius: calc(var(--u) * .8); background: #fff; color: var(--navy); }
body[data-page="house"] .clock { font-size: calc(var(--u) * 5.2); font-weight: 700; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
#stage { display: grid; align-content: center; justify-items: start; gap: calc(var(--u) * 1.2); min-height: 0; }
body[data-page="house"] .status {
  /* "Ocupada" mide ~4.4 em: el tope por ancho evita cortes en vertical y en pantallas angostas */
  font-size: min(calc(var(--u) * 17), calc((100vw - 2 * var(--safe-x)) / 4.5));
  line-height: .92;
  letter-spacing: -.05em;
  font-weight: 800;
  padding: 0;
  color: var(--tone);
  transition: color .8s;
  max-width: 100%;
}
body[data-page="house"] .until { padding: 0; font-size: calc(var(--u) * 6); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
body[data-page="house"] .host { padding: 0; margin: 0; font-size: calc(var(--u) * 3.2); font-weight: 600; color: rgba(255,255,255,.88); overflow-wrap: anywhere; }
body[data-page="house"] .until:empty, body[data-page="house"] .host:empty { display: none; }
body[data-page="house"] .next {
  position: static;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--u) * .5) calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: calc(var(--u) * 1.2);
  background: rgba(255,255,255,.06);
  font-size: calc(var(--u) * 2.6);
  color: #fff;
}
body[data-page="house"] .next:has(.next-t:empty) { visibility: hidden; }
.next-k { color: rgba(255,255,255,.78); font-weight: 500; }
.next-t { font-weight: 800; font-variant-numeric: tabular-nums; }
.next-h { color: rgba(255,255,255,.92); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.conn {
  position: fixed; left: 50%; top: calc(var(--safe-y, 5vh) * .5); transform: translateX(-50%); z-index: 10;
  display: inline-flex; align-items: center; gap: .6em; padding: .5em 1.2em; border-radius: 999px;
  background: #3a0d16; color: #ffd9de; border: 1px solid #ff4d63; font: 700 calc(var(--u, 1vw) * 1.3) var(--font);
}
body[data-page="house"] .conn i { width: .7em; height: .7em; border-radius: 50%; background: #ff4d63; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .4; } }
body[data-page="house"].stale #stage { opacity: .6; }
@media (max-aspect-ratio: 1/1) {
  body[data-page="house"] .clock { font-size: calc(var(--u) * 4.4); }
}
@media (prefers-reduced-motion: reduce) { .screen { transition: none; } }