* { box-sizing: border-box; }

body {
  background: #ffffff;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

#unity-container {
  width: 960px;
  margin: 0 auto;
}

/* Título, ahora en la fila inferior, a la misma altura que "Museo" */
#unity-title {
  color: #005265;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
  margin: 0;
}

/* Cuadro negro (área del canvas) */
#unity-canvas-wrap {
  position: relative;
  width: 960px;
  height: 600px;
  background: #000000;
}

#unity-canvas {
  display: block;
  width: 960px;
  height: 600px;
  background: #000000;
}

/* Pantalla de carga superpuesta y centrada sobre el cuadro negro */
#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  text-align: center;
}

#unity-logo {
  width: 440px;
  height: 170px;
  margin: 0 auto 26px auto;
  background: url("unicaja-logo.png") center / contain no-repeat;
}

#unity-progress-bar-empty {
  width: 320px;
  height: 14px;
  margin: 0 auto;
  background: #1d1d1d;
  border-radius: 7px;
  overflow: hidden;
}

#unity-progress-bar-full {
  width: 0%;
  height: 100%;
  background: #2BD124;
  border-radius: 7px;
  transition: width 0.15s ease-out;
}

/* Aviso (errores/warnings) */
#unity-warning {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  background: white;
  padding: 10px;
  display: none;
  z-index: 10;
}

/* Pie: "Museo" + botón de pantalla completa, alineado al cuadro */
#unity-footer {
  width: 960px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#unity-footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

#unity-build-title {
  color: #1a1a1a;
  font-weight: 600;
  font-size: 18px;
}

#unity-fullscreen-button {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #16b5e0;
  border-radius: 3px;
  cursor: pointer;
}

#unity-fullscreen-button:hover {
  background: #0fa0c8;
}

/* Modo móvil: el canvas llena la pantalla */
.unity-mobile #unity-canvas-wrap,
.unity-mobile #unity-canvas {
  width: 100%;
  height: 100%;
}

.unity-mobile #unity-title,
.unity-mobile #unity-footer {
  display: none;
}

/* Embebido en el shell (producción): el museo va dentro de un <iframe> a pantalla
   completa que gestiona el contenedor. El canvas debe llenar TODO el viewport del
   iframe (no quedarse en 960x600), y se oculta el pie/título para una vista inmersiva.
   Se usa 100vw/100vh para medir contra el viewport del iframe, no contra el padre. */
#unity-container.unity-embedded {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

#unity-container.unity-embedded #unity-canvas-wrap,
#unity-container.unity-embedded #unity-canvas {
  width: 100vw;
  height: 100vh;
}

#unity-container.unity-embedded #unity-title,
#unity-container.unity-embedded #unity-footer {
  display: none;
}