:root{--bg-main:#020604;--bg-card:rgba(10,20,17,0.7);--accent:#4ade80;--gold:#f3c34a;--text-muted:#64748b;--border-tech:#1f4732}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Montserrat',sans-serif}
body{color:#fff;display:flex;flex-direction:column;align-items:center;height:100vh;overflow:hidden;position:relative;z-index:1;background-image:url('./FondoDeBingo.png');background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed}
body::before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.7);z-index:-1;pointer-events:none}
#logosFlotantes{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0;overflow:hidden}
.logo-flotante{position:absolute;opacity:.3;animation:caerLogo linear infinite;filter:drop-shadow(0 0 10px rgba(243,195,74,.3))}
@keyframes caerLogo{0%{transform:translateY(-120%);opacity:.15}10%{opacity:.4}50%{opacity:.25}80%{opacity:.35}90%{opacity:.15}100%{transform:translateY(110vh);opacity:.05}}
header{width:100%;max-width:500px;padding:15px;background:rgba(2,6,4,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:100;border-bottom:1px solid var(--border-tech);box-shadow:0 4px 30px rgba(0,0,0,.5);position:relative}
.logo{text-align:center;font-size:24px;font-weight:900;color:var(--gold);margin-bottom:10px;letter-spacing:2px;text-shadow:0 0 10px rgba(243,195,74,.3)}
.live-link{display:block;text-decoration:none;background:#ef4444;color:#fff;text-align:center;padding:8px;font-weight:900;margin-bottom:10px;font-size:12px;letter-spacing:1px;border:1px solid #ff7b7b;animation:neon-pulse 1.5s infinite alternate;transition:.3s;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
@keyframes neon-pulse{from{box-shadow:0 0 5px #ef4444,inset 0 0 2px #ef4444}to{box-shadow:0 0 15px #ef4444,0 0 25px rgba(239,68,68,.5),inset 0 0 8px #ef4444}}
.shop-link{display:block;text-decoration:none;background:linear-gradient(135deg,#25d366,#128c3e);color:#fff;text-align:center;padding:8px;font-weight:900;margin-bottom:10px;font-size:12px;letter-spacing:1px;border:1px solid #22c55e;transition:.3s;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);box-shadow:0 0 10px rgba(37,211,102,.3)}
.shop-link:hover{box-shadow:0 0 20px rgba(37,211,102,.5);filter:brightness(1.1)}
.mode-toggle{display:grid;grid-template-columns:1fr 1fr;background:var(--bg-card);padding:4px;border-radius:8px;margin-bottom:10px;border:1px solid var(--border-tech)}
.mode-toggle button{padding:8px;border:none;background:0 0;color:var(--text-muted);font-weight:700;cursor:pointer;border-radius:6px;transition:all .3s;font-size:11px}
.mode-toggle button:hover:not(.active){color:var(--accent);text-shadow:2px 0 var(--accent),-2px 0 #ef4444}
.mode-toggle button.active{background:rgba(74,222,128,.15);color:var(--accent);border:1px solid var(--accent);box-shadow:inset 0 0 10px rgba(74,222,128,.2)}
input#numeroInput{width:100%;background:var(--bg-card);border:1px solid var(--border-tech);padding:10px;color:var(--accent);font-size:16px;text-align:center;font-weight:700;outline:0;transition:.3s;clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px)}
input#numeroInput:focus{border-color:var(--accent);box-shadow:0 0 15px rgba(74,222,128,.2);color:#fff}
main{flex:1;width:100%;max-width:500px;padding:10px 15px 20px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;z-index:1}
.display-area{display:grid;gap:10px;width:100%;align-content:center;justify-content:center}
.grid-tablas{grid-template-columns:1fr;max-width:500px;margin:0 auto}
.grid-tablas .carton-card img{max-height:calc(100vh - 260px);object-fit:contain}
.grid-regalos{grid-template-columns:1fr;max-width:350px;margin:0 auto}
.grid-regalos .carton-card img{max-height:calc(100vh - 280px);object-fit:contain}
.carton-wrapper{display:flex;flex-direction:column;gap:8px;align-items:center}
.scan-container{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%}
.carton-card{background:rgba(0,0,0,.7);position:relative;cursor:pointer;transition:.2s;border:1px solid var(--border-tech);box-shadow:0 5px 15px rgba(0,0,0,.8);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;backdrop-filter:blur(3px)}
.carton-card:active{transform:scale(.98)}
.carton-card img{width:100%;display:block;opacity:.95;transition:opacity .3s;pointer-events:none}
.carton-card:hover img{opacity:1}
.action-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.btn-action{padding:10px 12px;border:1px solid rgba(243,195,74,.4);background:linear-gradient(135deg,rgba(5,16,12,.9),rgba(0,0,0,.85));color:var(--gold);font-family:'Orbitron','Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:all .3s;box-shadow:0 0 8px rgba(243,195,74,.2),inset 0 0 8px rgba(74,222,128,.06);text-shadow:0 0 6px rgba(243,195,74,.4);display:flex;align-items:center;justify-content:center;gap:6px;backdrop-filter:blur(5px)}
.btn-action:hover{border-color:rgba(243,195,74,.8);box-shadow:0 0 15px rgba(243,195,74,.4),0 0 25px rgba(74,222,128,.15),inset 0 0 15px rgba(74,222,128,.1);transform:translateY(-1px)}
.btn-action:active{transform:translateY(0) scale(.97)}
.btn-action.copiar{border-color:rgba(74,222,128,.4);color:var(--accent);text-shadow:0 0 6px rgba(74,222,128,.4)}
.btn-action.copiar:hover{border-color:rgba(74,222,128,.8);box-shadow:0 0 15px rgba(74,222,128,.4),0 0 25px rgba(74,222,128,.15),inset 0 0 15px rgba(74,222,128,.1)}
.btn-action.copiado{border-color:#22c55e!important;color:#22c55e!important;text-shadow:0 0 10px rgba(34,197,94,.6)!important;box-shadow:0 0 20px rgba(34,197,94,.5)!important}
.empty-msg{text-align:center;color:var(--border-tech);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:14px}
.btn-bingo{position:fixed;bottom:20px;right:20px;background:linear-gradient(135deg,var(--gold),#b8860b);color:#020604;padding:15px 25px;border:none;font-weight:900;font-size:14px;cursor:pointer;z-index:1000;letter-spacing:1px;clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px);box-shadow:0 0 20px rgba(243,195,74,.4);transition:all .3s}
.btn-bingo:hover{transform:scale(1.05);filter:brightness(1.1);box-shadow:0 0 30px rgba(243,195,74,.6)}
.btn-bingo:disabled{background:#333;color:#888;cursor:not-allowed;box-shadow:none;filter:none;transform:none}
.modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(2,6,4,.95);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:4000}
.modal-content{background:var(--bg-main);padding:30px;width:90%;max-width:400px;border:1px solid var(--accent);box-shadow:0 0 30px rgba(74,222,128,.2);clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)}
.modal-content input,.modal-content select{width:100%;padding:12px;background:var(--bg-card);color:var(--accent);border:1px solid var(--border-tech);outline:0;font-weight:700;margin-bottom:15px}
#subcartonWrap{display:none}
.btn-modal{flex:1;padding:12px;font-weight:900;cursor:pointer;border:none;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:.2s}
.btn-cancel{background:#333;color:#fff}
.btn-cancel:hover{background:#555}
.btn-send{background:var(--accent);color:#000;box-shadow:0 0 10px rgba(74,222,128,.4)}
.btn-send:hover{box-shadow:0 0 20px var(--accent)}
#lightboxModal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.95);z-index:5000;display:none;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:10px}
#lightboxContent{width:100%;max-width:700px;display:flex;flex-direction:column;gap:10px;justify-content:center;align-content:center}
.lightbox-item{border-radius:8px;border:2px solid var(--accent);box-shadow:0 0 20px rgba(74,222,128,.3);display:flex;align-items:center;justify-content:center;overflow:hidden}
.lightbox-single img{max-height:70vh;width:100%;object-fit:contain;display:block}
.btn-close-lightbox{position:absolute;top:20px;right:20px;background:#ef4444;color:#fff;border:none;padding:10px 15px;font-weight:900;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);z-index:5001;transition:.2s}
.btn-close-lightbox:hover{background:#dc2626;box-shadow:0 0 15px rgba(239,68,68,.5)}
.scan-container::after{content:"";position:absolute;top:-10%;left:0;width:100%;height:4px;background:rgba(74,222,128,.9);box-shadow:0 0 15px var(--accent),0 0 30px var(--accent);pointer-events:none;z-index:10;opacity:0}
.scan-active::after{animation:barridoLaser 2.5s ease-in-out forwards}
@keyframes barridoLaser{0%{top:-10%;opacity:1}85%{top:105%;opacity:1}100%{top:105%;opacity:0}}
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:linear-gradient(135deg,rgba(5,16,12,.95),rgba(0,0,0,.95));color:var(--gold);padding:12px 24px;border:1px solid rgba(243,195,74,.5);font-family:'Orbitron','Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);opacity:0;transition:all .3s;z-index:10000;pointer-events:none;text-shadow:0 0 8px rgba(243,195,74,.5);box-shadow:0 0 20px rgba(243,195,74,.3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============ PANEL DISPOSITIVOS ============ */
.panel-dispositivos {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center; justify-content: center;
    z-index: 3000;
}
.panel-dispositivos.open { display: flex; }
.panel-content {
    background: var(--bg-main);
    padding: 25px;
    border: 1px solid var(--accent);
    clip-path: polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px);
    text-align: center;
    min-width: 220px;
}
.panel-content button {
    display: block; width: 100%; margin: 8px 0;
    padding: 12px; font-weight: 900; cursor: pointer;
    background: var(--bg-card); color: var(--accent);
    border: 1px solid var(--border-tech);
    clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
    transition: 0.2s;
}
.panel-content button:hover {
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(74,222,128,0.3);
}
.btn-cancelar-panel {
    color: #ef4444 !important;
    border-color: rgba(239,68,68,0.5) !important;
}