*{box-sizing:border-box}body{margin:0;background:#101827;color:#eef3fa;font:16px system-ui,Arial,sans-serif}main{width:min(1060px,94%);margin:32px auto}header{display:flex;align-items:center;gap:16px;margin-bottom:26px}.logo{background:#0d9488;border-radius:14px;padding:12px 18px;font-size:32px;font-weight:800}h1,h2,p{margin:0 0 12px}header p,.note,.panel p{color:#a9b8cd}.panel{border:1px solid #334155;background:#192438;border-radius:14px;padding:24px;max-width:670px}input{width:100%;padding:12px;background:#0f172a;color:#fff;border:1px solid #5b6d85;border-radius:8px;font:inherit;margin:8px 0 12px}button{border:0;border-radius:8px;padding:12px 16px;background:#0d9488;color:white;font-weight:650;cursor:pointer}button:disabled{opacity:.5;cursor:default}.copyline{display:flex;gap:8px;align-items:center}.copyline button{flex-shrink:0}.copyline input{min-width:0}.videos{display:grid;grid-template-columns:2fr 1fr;gap:12px}.videos>div{background:#060b13;min-height:240px;position:relative;border-radius:12px;overflow:hidden}.videos video{width:100%;height:100%;min-height:240px;object-fit:contain;background:#080e19}.videos span{position:absolute;left:10px;bottom:10px;background:#101827ce;padding:5px 10px;border-radius:6px}.status{margin-bottom:12px;color:#cbd5e1}nav{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}.danger{background:#b91c1c}.note{margin-top:24px;font-size:13px;line-height:1.5}@media(max-width:680px){.videos{grid-template-columns:1fr}.videos>div,.videos video{min-height:160px}.copyline{flex-direction:column;align-items:stretch}}

/* DEKOR Connect R1: llamada inmersiva, remoto en grande y cámara propia flotante */
#call{width:100%}
.call-stage{position:relative;width:100%;background:#050912;border-radius:16px;overflow:hidden;min-height:340px}
.call-stage .videos{display:block;position:relative;width:100%;height:min(68vh,720px);min-height:340px;background:#050912}
.call-stage .videos>div{position:absolute;inset:0;min-height:0;border-radius:0;overflow:hidden;background:#060b13}
.call-stage .videos video{width:100%;height:100%;min-height:0;object-fit:contain;background:#060b13}
.call-stage .videos .local-tile{inset:auto 14px 14px auto;width:clamp(110px,23%,230px);height:clamp(145px,28%,210px);z-index:3;border-radius:12px;border:2px solid #8795aa;box-shadow:0 6px 24px #0009}
.call-stage .videos .local-tile video{object-fit:cover}
.call-stage .videos span{font-size:12px;bottom:8px;left:8px}
.call-stage .videos .remote-tile{z-index:1}
.call-stage .videos.swapped .remote-tile{inset:auto 14px 14px auto;width:clamp(110px,23%,230px);height:clamp(145px,28%,210px);z-index:3;border-radius:12px;border:2px solid #8795aa;box-shadow:0 6px 24px #0009}
.call-stage .videos.swapped .remote-tile video{object-fit:cover}
.call-stage .videos.swapped .local-tile{inset:0;width:100%;height:100%;z-index:1;border:0;border-radius:0;box-shadow:none}
.call-stage .videos.swapped .local-tile video{object-fit:contain}
.stage-action{position:absolute;top:12px;z-index:5;background:#15233dcc;border:1px solid #64748b;color:#fff;font-size:12px;padding:9px 12px;backdrop-filter:blur(6px)}
.swap-action{left:12px}.fullscreen-action{right:12px}
.call-controls{justify-content:center;align-items:center}
.call-stage:fullscreen,.call-stage:-webkit-full-screen{width:100vw;height:100dvh;border-radius:0}
.call-stage:fullscreen .videos,.call-stage:-webkit-full-screen .videos{height:100%;min-height:100%;}
@media(max-width:680px){main{width:min(100%,1060px);margin:0 auto;padding:14px}#call .call-stage .videos{height:65dvh;min-height:320px}#call .call-stage .local-tile,#call .call-stage .videos.swapped .remote-tile{width:clamp(100px,30vw,160px);height:clamp(130px,24vh,190px);right:10px;bottom:10px}#call .call-stage .videos.swapped .local-tile{height:100%;width:100%}.stage-action{top:8px;padding:8px;font-size:11px}.call-stage:fullscreen .videos,.call-stage:-webkit-full-screen .videos{height:100dvh!important}}

.call-stage:fullscreen .call-controls,.call-stage:-webkit-full-screen .call-controls{position:absolute;bottom:0;left:0;right:0;z-index:6;background:#0d1728cc;padding:8px;margin:0}
.call-stage:fullscreen .videos,.call-stage:-webkit-full-screen .videos{height:100%;padding-bottom:60px}


/* R1 móvil: controles plegables para no tapar la imagen */
.controls-action{display:none;right:12px;top:56px}
@media(max-width:680px){
  .fullscreen-action{right:8px;top:8px}
  .controls-action{display:block;right:8px;top:48px;z-index:7}
  .call-controls.mobile-hidden{display:none}
  .call-controls.mobile-open{display:flex;position:absolute;left:10px;right:10px;bottom:10px;z-index:8;flex-direction:column;gap:8px;background:#0d1728e8;padding:10px;border:1px solid #334155;border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.45)}
  .call-controls.mobile-open button{width:100%;padding:12px 14px}
  .call-stage:fullscreen .call-controls.mobile-open,.call-stage:-webkit-full-screen .call-controls.mobile-open{bottom:10px;left:10px;right:10px;padding:10px}
}