:root {
  --navy: #0B1120;
  --turquesa: #4EFFEF;
  --teal: #26A3AD;
  --oro: #E2B679;
  --niebla: #9AA8BC;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #000; cursor: none;
}
#stage { position: fixed; inset: 0; background: #000; }
.capa {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; transition: opacity .8s ease;
}
.capa.visible { opacity: 1; }

/* Pantallas de sistema: código, estado, identificador */
#bx-aviso {
  position: fixed; inset: 0; z-index: 10;
  display: grid; grid-template-rows: 1fr auto;
  background: var(--navy); color: #fff;
  font-family: 'Syne', 'Segoe UI', system-ui, sans-serif;
  padding: 7vh 7vw;
}
#bx-aviso .centro { align-self: center; }
#bx-aviso .titulo {
  font-size: 3.4vh; font-weight: 500; color: var(--niebla); margin: 0 0 2vh;
}
#bx-aviso .valor {
  font-size: 17vh; font-weight: 800; line-height: .95;
  letter-spacing: .04em; color: var(--turquesa); margin: 0;
}
#bx-aviso .valor.texto { font-size: 9vh; letter-spacing: 0; color: #fff; }
#bx-aviso .nota {
  font-size: 3vh; color: #fff; opacity: .85; margin: 4vh 0 0; max-width: 34em;
}
#bx-aviso .pie {
  display: flex; justify-content: space-between; align-items: end;
  font-size: 2.2vh; color: var(--niebla);
}
#bx-aviso .marca { color: var(--oro); font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .capa { transition: none; } }