html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:system-ui,Segoe UI,Roboto,Arial}
#app{position:fixed;inset:0;z-index:1}
#panel{position:fixed;left:10px;bottom:10px;background:rgba(0,0,0,.65);color:#fff;padding:10px 12px;border-radius:12px;backdrop-filter:blur(10px);z-index:20;}
#panel .t{font-weight:700;margin-bottom:6px;font-size:13px}
#panel label{font-size:12px;display:flex;gap:10px;align-items:center}
#panel input{width:220px}


/* Marco superior (logos / branding) */
#frame{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:50;pointer-events:none;}

/* Loading overlay */
.loading{
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 40; /* debajo del marco (50), encima del video */
  color: #fff;
  backdrop-filter: blur(6px);
}
.spinner{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 4px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.95);
  animation: spin 0.9s linear infinite;
}
@keyframes spin{
  to { transform: rotate(360deg); }
}
.loading-text{
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}