/*
 * Turns screen for TVs, from bravo-pos.pen (5 · Menú › D · Pantalla de turnos).
 * --p is one pixel of the 1920×1080 linking screens; --u is one unit of the
 * 320×180 canvas the templates are drawn on (the same as the app's preview).
 */
:root {
  --p: min(calc(100vw / 1920), calc(100vh / 1080));
  --u: calc(var(--p) * 6);
  --link-bg: #282a36;
  --link-panel: #343746;
  --link-text: #f8f8f2;
  --link-muted: #6272a4;
  --link-accent: #bd93f9;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}

/* ─── Linking: «TV: vincular con código» and «conectando desde Chromecast» ─── */

.link-screen {
  width: 100%;
  height: 100%;
  background: var(--link-bg);
  display: flex;
  flex-direction: column;
  padding: calc(64 * var(--p)) calc(96 * var(--p));
}

.brand {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--p));
  color: var(--link-text);
  font-size: calc(44 * var(--p));
  font-weight: 800;
}

.brand-logo {
  width: calc(72 * var(--p));
  height: calc(72 * var(--p));
  border-radius: calc(20 * var(--p));
  background: var(--link-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-icon {
  width: calc(44 * var(--p));
  height: calc(44 * var(--p));
  fill: var(--link-bg);
}

.link-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(40 * var(--p));
  text-align: center;
}

.link-title {
  color: var(--link-text);
  font-size: calc(72 * var(--p));
  font-weight: 800;
}

.connecting-title {
  color: var(--link-text);
  font-size: calc(64 * var(--p));
  font-weight: 800;
}

.link-subtitle {
  color: var(--link-muted);
  font-size: calc(36 * var(--p));
}

.code-box {
  display: flex;
  gap: calc(56 * var(--p));
  padding: calc(28 * var(--p)) calc(72 * var(--p));
  border-radius: calc(32 * var(--p));
  background: var(--link-panel);
}

.code-char {
  min-width: calc(90 * var(--p));
  color: var(--link-text);
  font-size: calc(150 * var(--p));
  font-weight: 800;
  letter-spacing: calc(4 * var(--p));
  line-height: 1.2;
}

.timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--p));
}

.timer-bar {
  width: calc(656 * var(--p));
  height: calc(10 * var(--p));
  border-radius: calc(5 * var(--p));
  background: var(--link-panel);
  overflow: hidden;
}

.timer-fill {
  height: 100%;
  width: 100%;
  border-radius: calc(5 * var(--p));
  background: var(--link-accent);
  transition: width 1s linear;
}

.timer-label {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--p));
  color: var(--link-muted);
  font-size: calc(30 * var(--p));
}

.timer-icon {
  width: calc(30 * var(--p));
  height: calc(30 * var(--p));
  fill: var(--link-muted);
}

.link-path {
  color: var(--link-accent);
  font-size: calc(30 * var(--p));
  font-weight: 600;
  white-space: pre;
}

.link-footer {
  text-align: center;
  color: var(--link-muted);
  font-size: calc(26 * var(--p));
}

.spinner {
  width: calc(120 * var(--p));
  height: calc(120 * var(--p));
  border-radius: 50%;
  border: calc(10 * var(--p)) solid var(--link-panel);
  border-top-color: var(--link-accent);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ─── Templates, on the 320×180 canvas ─── */

.viewport {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage {
  position: relative;
  width: calc(320 * var(--u));
  height: calc(180 * var(--u));
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

.layout {
  width: 100%;
  height: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.business {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--u));
  min-width: 0;
}

.logo {
  flex: none;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-radius: 50%;
  background: var(--ready);
  color: var(--bg);
  font-size: calc(5.2 * var(--u));
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-name {
  font-size: calc(6 * var(--u));
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clock {
  flex: none;
  color: #cdb9a5;
  font-size: calc(4.8 * var(--u));
  font-weight: 500;
}

.header-big .logo {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  font-size: calc(7 * var(--u));
}

.header-big .business-name {
  font-size: calc(7.6 * var(--u));
}

.header-big .clock {
  font-size: calc(5.6 * var(--u));
}

.columns {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: calc(7 * var(--u));
}

.column {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--u));
  padding: calc(7 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--panels);
}

.column-title {
  color: #cdb9a5;
  font-size: calc(6.4 * var(--u));
  font-weight: 800;
  line-height: 1.2;
}

.column-ready .column-title {
  color: var(--ready);
}

.chips {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: calc(3 * var(--u));
  overflow: hidden;
}

.chip {
  flex: none;
  width: calc(25 * var(--u));
  height: calc(18 * var(--u));
  border-radius: calc(3 * var(--u));
  background: #3a2a24;
  color: var(--text);
  font-size: calc(10 * var(--u));
  font-weight: 800;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chip-ready {
  background: var(--ready);
  color: var(--bg);
}

.chip-lit {
  box-shadow: inset 0 0 0 calc(1.33 * var(--u)) #ffffff;
}

/* Media slot, its rotation dots and the ready notice */

.media-box {
  position: relative;
  overflow: hidden;
  background: #3a2a24;
}

.media-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.media-layer.visible {
  opacity: 1;
}

.media-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dots {
  position: absolute;
  right: calc(8 * var(--u));
  bottom: calc(8 * var(--u));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(4 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #00000080;
}

.dot {
  width: calc(4 * var(--u));
  height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #ffffff99;
}

.dot-active {
  width: calc(10 * var(--u));
  background: var(--ready);
}

.notice {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000b3;
  visibility: hidden;
}

.notice.visible {
  visibility: visible;
}

.notice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1.7 * var(--u));
  padding: calc(7.5 * var(--u)) calc(14 * var(--u));
  border-radius: calc(7.5 * var(--u));
  background: var(--ready);
  color: var(--bg);
}

.notice-label {
  font-size: calc(8.7 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.54 * var(--u));
  line-height: 1.2;
}

.notice-number {
  font-size: calc(43.3 * var(--u));
  font-weight: 900;
  line-height: 1;
}

.notice-detail {
  font-size: calc(9.5 * var(--u));
  font-weight: 700;
  line-height: 1.2;
}

/* «Pantalla completa» */

.layout-fullscreen {
  position: relative;
}

.media-full {
  position: absolute;
  inset: 0;
}

.media-full .dots {
  bottom: calc(36 * var(--u));
}

.media-full .notice {
  bottom: calc(30 * var(--u));
}

.fullscreen-turns {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u));
  padding: calc(11 * var(--u)) calc(11 * var(--u)) calc(37 * var(--u));
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.8s ease;
}

.fullscreen-turns.visible {
  opacity: 1;
}

.ready-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: calc(30 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: 0 calc(10 * var(--u));
  background: var(--ready-bar);
}

.bar-title {
  flex: none;
  color: var(--ready);
  font-size: calc(6 * var(--u));
  font-weight: 800;
}

.bar-chips {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: calc(4 * var(--u));
  overflow: hidden;
}

/* «Turnos y promoción» */

.layout-side {
  display: flex;
}

.side-turns {
  width: calc(140 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--u));
  padding: calc(8 * var(--u));
}

.media-side {
  width: calc(180 * var(--u));
  height: 100%;
}

/* «Turnos con banda» */

.layout-band {
  display: flex;
  flex-direction: column;
}

.band-turns {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--u));
  padding: calc(9 * var(--u)) calc(11 * var(--u)) calc(7 * var(--u));
}

.media-band {
  width: 100%;
  height: calc(60 * var(--u));
}

.media-band .dots {
  right: calc(4 * var(--u));
  bottom: calc(4 * var(--u));
}

/* «Solo turnos» */

.layout-turns {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u));
  padding: calc(11 * var(--u));
}