:root{--navy:#061b37;--blue:#07519a;--sky:#20a9e0;--orange:#f5a20b;--red:#df252c;--white:#fff;--mist:#d9e9f7;font-family:'DM Sans',sans-serif;color:white;background:var(--navy)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 8% 15%,rgba(32,169,224,.2),transparent 28%),radial-gradient(circle at 92% 88%,rgba(223,37,44,.13),transparent 25%),linear-gradient(135deg,#06182f,#073964);overflow-x:hidden}.hidden{display:none!important}.display-grid{position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px}.display-header{height:112px;max-width:1500px;margin:auto;padding:10px 35px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.display-brand{display:flex;align-items:center;gap:16px}.display-logos{display:flex;align-items:center}.display-logos img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.22))}.display-logos img+img{width:82px;height:82px;margin-left:-10px}.display-brand>div:last-child{display:flex;flex-direction:column}.display-brand strong{font:800 27px Outfit,sans-serif;color:#ffb21b;letter-spacing:-.02em}.display-brand small{font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:700;color:#d5e8fa;margin-top:4px}.display-controls{display:flex;align-items:center;gap:12px}.display-controls button,.display-live{border:1px solid rgba(255,255,255,.18);background:rgba(4,26,51,.5);color:white;border-radius:99px;padding:10px 16px;font-size:12px;font-weight:700}.display-controls button{cursor:pointer}.display-live{display:flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:.1em}.display-live i{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 6px rgba(223,37,44,.14);animation:pulse 1.7s infinite}@keyframes pulse{50%{box-shadow:0 0 0 11px rgba(223,37,44,0)}}
.display-shell{width:min(1500px,calc(100% - 55px));min-height:calc(100vh - 182px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:22px;position:relative;z-index:1}.live-stage{position:relative;min-height:650px;border:1px solid rgba(255,255,255,.12);border-radius:30px;overflow:hidden;background:linear-gradient(145deg,rgba(7,50,91,.96),rgba(3,22,44,.96));box-shadow:0 30px 90px rgba(0,0,0,.28)}.live-stage:before{content:'';position:absolute;width:580px;height:580px;border-radius:50%;background:radial-gradient(circle,rgba(32,169,224,.16),transparent 66%);left:50%;top:50%;transform:translate(-50%,-50%)}.stage-topline{position:absolute;z-index:3;left:30px;right:30px;top:25px;display:flex;justify-content:space-between;align-items:center;color:#9fc5df;text-transform:uppercase;letter-spacing:.12em;font-size:11px}.stage-topline strong{color:#ffbd37;background:rgba(245,162,11,.1);padding:8px 12px;border-radius:99px}.idle-view,.drawing-view,.winner-view{position:absolute;z-index:2;inset:65px 30px 30px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.idle-view img{width:145px;height:145px;object-fit:contain;filter:drop-shadow(0 12px 25px rgba(0,0,0,.3));margin-bottom:12px}.idle-view p,.winner-view p{color:#ffb21b;text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:800;margin:5px 0 15px}.idle-view h1{font:800 clamp(45px,5.2vw,78px)/.95 Outfit,sans-serif;letter-spacing:-.045em;margin:0}.idle-view h1 em{font-style:normal;color:var(--sky)}.idle-view>span{color:#a9c6db;margin-top:22px}.drawing-label{text-transform:uppercase;letter-spacing:.18em;color:#ffbd37;font-size:13px;font-weight:800}.drawing-view h1{font:800 clamp(48px,6vw,92px)/.96 Outfit,sans-serif;text-transform:uppercase;letter-spacing:-.04em;margin:30px 0;max-width:950px}.drawing-view.spinning h1{animation:reel .11s infinite alternate;color:#b9d6e8;filter:blur(1px)}@keyframes reel{to{transform:translateY(3px);opacity:.7}}.drawing-view.water{background:radial-gradient(circle,rgba(32,169,224,.18),transparent 50%)}.drawing-view.winner{background:radial-gradient(circle,rgba(245,162,11,.2),transparent 50%)}.sequence-dots{display:flex;gap:12px}.sequence-dots i{width:55px;height:7px;border-radius:99px;background:rgba(255,255,255,.14)}.sequence-dots i.water{background:var(--sky)}.sequence-dots i.winner{background:var(--orange)}.current-prize{margin-top:26px;color:#c9dfef;font-size:18px}.winner-burst{width:145px;height:145px;margin-bottom:5px;position:relative}.winner-burst:before{content:'';position:absolute;inset:-20px;border:2px solid rgba(245,162,11,.28);border-radius:50%;animation:burst 1.8s infinite}@keyframes burst{50%{transform:scale(1.12);opacity:.3}}.winner-burst img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.3))}.winner-view h1{font:800 clamp(50px,6vw,92px)/.95 Outfit,sans-serif;letter-spacing:-.045em;text-transform:uppercase;margin:5px 0 18px;max-width:950px}.winner-view>strong{font-size:23px;color:#ffb21b}.display-sidebar{display:flex;flex-direction:column;gap:20px}.join-card,.recent-card{background:rgba(255,255,255,.97);color:#10243e;border-radius:25px;box-shadow:0 24px 70px rgba(0,0,0,.2)}.join-card{padding:20px;display:flex;gap:16px;align-items:center;border-top:5px solid var(--orange)}#displayQr{width:100px;height:100px;flex:0 0 100px;background:white;padding:5px}#displayQr img,#displayQr canvas{width:90px!important;height:90px!important}.join-card p{margin:0;color:var(--red);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.join-card h2{font:800 22px/1 Outfit,sans-serif;margin:7px 0}.join-card small{display:block;max-width:205px;color:#718092;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.recent-card{padding:25px;flex:1}.recent-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e2e9ef;padding-bottom:17px}.recent-heading span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);font-weight:800}.recent-heading h2{font:800 25px Outfit,sans-serif;margin:4px 0 0}.recent-heading b{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:#eaf3fb;color:var(--blue)}.recent-list{margin-top:5px;max-height:455px;overflow:auto}.winner-row{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #e8edf1}.winner-row:last-child{border-bottom:0}.winner-row>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#fff0cb;color:#a05b00}.winner-row strong,.winner-row small{display:block}.winner-row strong{font-size:14px}.winner-row small{font-size:11px;color:#758394;margin-top:3px}.empty{text-align:center;color:#8190a0;font-size:13px;padding:40px 5px}footer{height:70px;max-width:1500px;margin:auto;padding:0 35px;display:flex;align-items:center;justify-content:space-between;color:#8fb2ca;font-size:11px;text-transform:uppercase;letter-spacing:.1em}footer strong{color:#ffb21b;font-size:13px}
@media(max-width:1050px){.display-shell{grid-template-columns:1fr}.display-sidebar{display:grid;grid-template-columns:1fr 1fr}.live-stage{min-height:600px}.recent-list{max-height:250px}.display-brand strong{font-size:22px}}
@media(max-width:720px){.display-header{height:auto;padding:12px 16px}.display-brand strong{font-size:17px}.display-brand small{font-size:8px}.display-logos img{width:50px;height:50px}.display-logos img+img{width:54px;height:54px}.display-controls button{display:none}.display-live{font-size:9px;padding:8px 11px}.display-shell{width:calc(100% - 24px);min-height:auto}.live-stage{min-height:500px;border-radius:22px}.display-sidebar{grid-template-columns:1fr}.idle-view h1{font-size:44px}.drawing-view h1,.winner-view h1{font-size:44px}.join-card{order:2}.recent-card{order:1}.stage-topline{left:18px;right:18px}.stage-topline span{max-width:55%}footer{height:auto;padding:25px 18px;gap:12px;flex-wrap:wrap}footer strong{order:3;width:100%;text-align:center}}

/* URL completa y acción de copiado */
.join-info{min-width:0;flex:1}.join-card .register-url{display:block;max-width:none;width:100%;color:#718092;font-size:10px;line-height:1.35;white-space:normal;text-overflow:clip;overflow:visible;overflow-wrap:anywhere;word-break:break-word}.copy-url-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:31px;margin-top:8px;padding:0 10px;border:1px solid rgba(7,81,154,.2);border-radius:8px;background:#eaf3fb;color:var(--blue);font:700 10px 'DM Sans',sans-serif;cursor:pointer;transition:.18s}.copy-url-button:hover{background:#dcecf9;transform:translateY(-1px)}.copy-url-button:focus-visible{outline:3px solid rgba(245,162,11,.45);outline-offset:2px}.copy-url-button.copied{border-color:rgba(8,118,95,.25);background:#e8f7f2;color:#08765f}.copy-url-button span{font-size:15px}

/* Descarga de afiche A4 a 300 dpi */
.join-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.download-qr-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:31px;margin-top:8px;padding:0 10px;border:1px solid rgba(245,162,11,.35);border-radius:8px;background:#fff1cf;color:#9a5900;font:700 10px 'DM Sans',sans-serif;cursor:pointer;transition:.18s}.download-qr-button:hover{background:#ffe6a8;transform:translateY(-1px)}.download-qr-button:focus-visible{outline:3px solid rgba(32,169,224,.4);outline-offset:2px}.download-qr-button:disabled{opacity:.65;cursor:wait;transform:none}.download-qr-button span{font-size:15px}

.sequence-dots{max-width:760px;flex-wrap:wrap}.sequence-dots i{flex:0 0 55px}