@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;600;700;800&display=swap";:root{--bg-primary:#0a0e1a;--bg-secondary:#111827;--bg-card:#1a1f35;--bg-card-hover:#222842;--text-primary:#f0f2f5;--text-secondary:#9ca3af;--text-muted:#6b7280;--accent:#6366f1;--accent-glow:#6366f14d;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--border:#ffffff0f;--gold:#fbbf24;--radius:12px;--shadow:0 4px 24px #0006}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,system-ui,sans-serif}.connection-banner{z-index:9999;align-items:center;gap:10px;padding:10px 20px;font-size:.85rem;font-weight:500;animation:.3s ease-out slideDown;display:flex;position:fixed;top:0;left:0;right:0}.connection-banner.offline{background:var(--danger);color:#fff}.connection-banner.reconnecting{background:var(--warning);color:#000}.pulse-dot{border-radius:50%;width:10px;height:10px;animation:1.5s infinite pulse}.offline-dot{background:#fff}.reconnecting-dot{background:#000}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.header-bar{border-bottom:1px solid var(--border);background:linear-gradient(135deg,#1e1b4b,#312e81);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;display:flex;box-shadow:0 2px 20px #6366f126}.btn-volver{color:#fff;background:#ffffff1a;border:1px solid #ffffff26;border-radius:8px;padding:8px 16px;font-size:.85rem;font-weight:600;text-decoration:none;transition:all .2s}.btn-volver:hover{background:#fff3;transform:translateY(-1px)}.header-badge{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.badge-user{align-items:center;gap:8px;font-weight:600;display:flex}.badge-icon{font-size:1.2rem}.badge-stats{background:#0003;border-radius:10px;align-items:center;gap:12px;padding:8px 16px;display:flex}.stat-item{font-size:.85rem}.saldo-stat{color:var(--gold)}.btn-recargar{background:var(--success);color:#fff;border-radius:8px;padding:6px 14px;font-size:.8rem;font-weight:600;text-decoration:none;transition:all .2s}.btn-recargar:hover{filter:brightness(1.15);transform:translateY(-1px)}.header-sala{flex-wrap:wrap;align-items:center;gap:16px;font-size:.9rem;display:flex}.sala-code,.sorteo-num{background:#ffffff1a;border-radius:6px;padding:4px 10px;font-size:.8rem}.sorteo-num{color:var(--gold)}.main-content{max-width:1400px;margin:0 auto;padding:24px}.info-header{flex-wrap:wrap;gap:12px;margin-bottom:24px;display:flex}.info-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;flex:1;min-width:120px;padding:14px 18px;transition:transform .2s,box-shadow .2s}.info-item:hover{transform:translateY(-2px);box-shadow:0 4px 16px #6366f11a}.info-item h2{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;font-size:.65rem;font-weight:600}.info-item .valor{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:1.1rem;font-weight:700}.premios-section{margin-bottom:24px}.premios-section h2{margin-bottom:14px;font-size:1.1rem;font-weight:700}.premios-grid{flex-wrap:wrap;gap:10px;display:flex}.premio-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;flex:1;min-width:140px;padding:14px;transition:all .3s}.premio-card.otorgado{border-color:var(--gold);background:#fbbf2414}.premio-puesto{color:var(--accent);letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px;font-size:.75rem;font-weight:700;display:block}.premio-monto{color:var(--success);font-family:Outfit,sans-serif;font-size:1.3rem;font-weight:800;display:block}.premio-ganador{color:var(--gold);margin-top:6px;font-size:.75rem;font-weight:600;animation:.5s fadeIn;display:block}.layout-principal{grid-template-columns:1fr 320px;gap:24px;display:grid}@media (width<=900px){.layout-principal{grid-template-columns:1fr}}.tablero{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;display:grid}.casilla{background:var(--bg-card);border:2px solid var(--border);text-align:center;cursor:pointer;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:95px;padding:10px 6px;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.casilla:hover:not(.vendido):not(.juego-activo){border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow);transform:translateY(-3px)scale(1.02)}.casilla.vendido{cursor:default;background:#1a2744;border-color:#2563eb}.casilla.mio{background:#fbbf241a;box-shadow:0 0 12px #fbbf2426;border-color:var(--gold)!important}.casilla.juego-activo{cursor:default}.casilla.casi-gana{border-color:var(--warning);animation:1.5s infinite pulseGlow}.casilla.ganador{border-width:3px;animation:.6s winBounce}.badge-ganador{color:#fff;border-radius:0 8px;padding:2px 6px;font-size:.6rem;font-weight:800;position:absolute;top:2px;right:2px}.casilla-nombre{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.65rem;font-weight:500;overflow:hidden}.casilla-numero{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:1.6rem;font-weight:800;line-height:1}.indicadores{gap:3px;margin-top:2px;display:flex}.indicador{background:#ffffff14;border:1px solid #ffffff26;border-radius:50%;width:8px;height:8px;transition:all .3s}.indicador.lleno{background:var(--accent);border-color:var(--accent);box-shadow:0 0 6px var(--accent-glow)}@keyframes pulseGlow{0%,to{box-shadow:0 0 8px #f59e0b33}50%{box-shadow:0 0 20px #f59e0b80}}@keyframes winBounce{0%{transform:scale(1)}30%{transform:scale(1.12)}60%{transform:scale(.95)}to{transform:scale(1)}}.panel-lateral{flex-direction:column;gap:16px;display:flex}.panel-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.panel-card h2{color:var(--text-primary);align-items:center;gap:6px;margin-bottom:12px;font-size:.85rem;font-weight:700;display:flex}.placeholder{color:var(--text-muted);font-size:.85rem}.numero-actual{text-align:center;color:var(--accent);text-shadow:0 0 30px var(--accent-glow);padding:20px 0;font-family:Outfit,sans-serif;font-size:3.5rem;font-weight:800}.ganadores-lista{flex-direction:column;gap:8px;display:flex}.ganador-item{border-left:3px solid var(--gold);background:#ffffff08;border-radius:8px;align-items:center;gap:8px;padding:8px 12px;animation:.5s fadeIn;display:flex}.ganador-puesto{color:var(--gold);min-width:28px;font-size:.7rem;font-weight:800}.ganador-nombre{flex:1;font-size:.85rem;font-weight:500}.ganador-premio{color:var(--success);font-family:Outfit,sans-serif;font-size:.85rem;font-weight:700}.historial-grid{flex-wrap:wrap;gap:6px;display:flex}.historial-num{background:var(--bg-secondary);border:1px solid var(--border);width:36px;height:36px;color:var(--text-primary);border-radius:8px;justify-content:center;align-items:center;font-family:Outfit,sans-serif;font-size:.85rem;font-weight:700;display:flex}.bola-overlay{z-index:5000;pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.bola-container{position:relative}.bola-esfera{background:radial-gradient(circle at 35% 30%, #fff, var(--accent) 50%, #312e81 100%);width:160px;height:160px;box-shadow:0 0 60px var(--accent-glow), inset 0 -6px 20px #0000004d, inset 0 6px 20px #fff3;border-radius:50%;justify-content:center;align-items:center;display:flex}.bola-numero{color:#fff;text-shadow:0 2px 8px #0006;font-family:Outfit,sans-serif;font-size:4rem;font-weight:800}.bola-sombra{background:radial-gradient(#6366f166,#0000);border-radius:50%;width:120px;height:16px;margin:12px auto 0}.fireworks-container{pointer-events:none;z-index:4000;position:fixed;inset:0;overflow:hidden}.fw-particle{border-radius:50%;width:6px;height:6px;animation:1.2s ease-out forwards particleBurst;position:absolute}@keyframes particleBurst{0%{opacity:1;transform:translate(0)scale(1)}to{transform:translate(var(--dx), var(--dy)) scale(0);opacity:0}}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:6000;background:#000000b3;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;width:90%;max-width:440px;animation:.3s cubic-bezier(.34,1.56,.64,1) modalIn;box-shadow:0 20px 60px #00000080}.modal-header-react{background:linear-gradient(135deg, var(--accent), #7c3aed);border-radius:16px 16px 0 0;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.modal-header-react h2{color:#fff;margin:0;font-size:1.1rem}.modal-close-btn{color:#ffffffb3;cursor:pointer;background:0 0;border:none;font-size:1.8rem;line-height:1}.modal-close-btn:hover{color:#fff}.modal-body-react{text-align:center;padding:30px 24px}.numero-preview{margin-bottom:20px}.numero-circulo{width:100px;height:100px;color:var(--accent);border:3px solid var(--accent);background:#6366f114;border-radius:50%;justify-content:center;align-items:center;margin:0 auto;font-family:Outfit,sans-serif;font-size:3rem;font-weight:800;display:flex}.compra-info{flex-direction:column;gap:10px;margin-bottom:16px;display:flex}.info-row{background:#ffffff08;border-radius:8px;justify-content:space-between;padding:8px 16px;display:flex}.precio-valor,.saldo-ok{color:var(--success)}.saldo-insuf{color:var(--danger)}.alerta-saldo{color:var(--danger);background:#ef44441a;border:1px solid #ef44444d;border-radius:8px;padding:10px;font-size:.85rem;font-weight:500}.modal-footer-react{gap:12px;padding:0 24px 24px;display:flex}.btn-cancelar,.btn-confirmar{cursor:pointer;border:none;border-radius:10px;flex:1;padding:12px;font-size:.9rem;font-weight:600;transition:all .2s}.btn-cancelar{color:var(--text-secondary);background:#ffffff0f}.btn-cancelar:hover{background:#ffffff1a}.btn-confirmar{background:linear-gradient(135deg, var(--success), #059669);color:#fff}.btn-confirmar:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}.btn-confirmar:disabled{opacity:.4;cursor:not-allowed}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalIn{0%{opacity:0;transform:scale(.9)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}@media (width<=768px){.header-bar{padding:12px 16px}.main-content{padding:16px}.tablero{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px}.casilla{min-height:80px;padding:8px 4px}.casilla-numero{font-size:1.3rem}.bola-esfera{width:120px;height:120px}.bola-numero{font-size:3rem}}*,:before,:after{box-sizing:border-box}body{margin:0}