*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:root{--primary-color:#1a1a2e;--secondary-color:#16213e;--accent-color:#00ff88;--error-color:#ff4444;--warning-color:#ffaa00}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:#000;color:#fff;overflow:hidden;width:100vw;height:100vh}

/* App Container - Para manejar orientación */
#app-container{width:100%;height:100%;position:fixed;top:0;left:0;background:#000;overflow:hidden}

/* Orientation specific styles */
body.landscape #app-container{width:100vw;height:100vh}
body.portrait #media-container video,
body.portrait #media-container img{object-fit:contain!important;width:100%!important;height:100%!important}

#loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,#000,#0a0e2b,#030303);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;transition:opacity .5s ease}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--accent-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{margin-top:20px;font-size:16px;color:rgba(255,255,255,.8);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}#config-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;justify-content:center;align-items:center;z-index:900;backdrop-filter:blur(10px)}.config-card{background:linear-gradient(to bottom,#cfcfcf,#c2c1c2,#9a9b9b);padding:30px;border-radius:16px;width:400px;max-width:90%;box-shadow:0 20px 60px rgba(0,0,0,.5)}.config-card h2{color:#333;margin-bottom:24px;text-align:center;font-size:24px}.form-group{margin-bottom:20px}.form-group label{display:block;color:#333;font-weight:600;margin-bottom:8px;font-size:14px}.form-group input{width:100%;padding:14px;border:2px solid #ddd;border-radius:8px;font-size:16px;transition:border-color .3s}.form-group input:focus{outline:none;border-color:var(--accent-color)}.error-message{color:var(--error-color);font-size:14px;margin-top:10px;text-align:center;min-height:20px}.btn-primary{width:100%;padding:16px;background:var(--primary-color);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s}.btn-primary:hover{background:var(--secondary-color);transform:translateY(-2px)}.btn-primary:disabled{background:#666;cursor:not-allowed;transform:none}.btn-close{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.1);border:none;color:#fff;width:40px;height:40px;border-radius:50%;font-size:20px;cursor:pointer;transition:background .3s}.btn-close:hover{background:rgba(255,255,255,.2)}#media-player{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;display:none}#media-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:#000}#media-container video,#media-container img{max-width:100%;max-height:100%;object-fit:contain}#media-container video.cover,#media-container img.cover{width:100%;height:100%;object-fit:cover}

#audio-visualizer{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,#1a1a2e,#16213e,#0a0a0a);display:none;flex-direction:column;justify-content:center;align-items:center}#visualizer-canvas{width:90%;height:60%}.audio-label{position:absolute;padding:12px 24px;background:rgba(0,0,0,.7);border-radius:20px;font-size:28px;font-weight:bold;color:#fff;box-shadow:0 0 20px rgba(0,255,255,.3);animation:glow .8s ease-in-out infinite alternate}@keyframes glow{from{box-shadow:0 0 20px rgba(0,255,255,.3)}to{box-shadow:0 0 30px rgba(0,255,255,.6)}}.status-badge{position:fixed;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:bold;z-index:100}#global-audio-badge{top:10px;right:10px;background:rgba(0,200,100,.9);display:none}#aviso-badge{bottom:20px;left:20px;background:rgba(255,0,0,.9);display:none}#offline-badge{bottom:20px;left:20px;background:rgba(255,170,0,.9);display:none}

#orientation-badge{top:10px;left:10px;background:rgba(100,100,255,.9);display:none;z-index:101}

#error-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;display:none;flex-direction:column;justify-content:center;align-items:center;z-index:800}.error-icon{font-size:64px;margin-bottom:20px}.error-text{font-size:18px;color:#fff;margin-bottom:20px}.btn-retry{padding:12px 30px;background:var(--accent-color);color:#000;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer}#waiting-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;display:none;flex-direction:column;justify-content:center;align-items:center}.waiting-icon{font-size:64px;color:var(--warning-color);margin-bottom:20px}#fullscreen-btn{position:fixed;bottom:20px;right:20px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;padding:10px 15px;border-radius:8px;cursor:pointer;z-index:100;transition:all .3s}#fullscreen-btn:hover{background:rgba(255,255,255,.2)}#demo-watermark{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-30deg);font-size:80px;font-weight:bold;color:rgba(255,255,255,.05);pointer-events:none;z-index:9999;white-space:nowrap}.fade-in{animation:fadeIn .6s ease forwards}.fade-out{animation:fadeOut .6s ease forwards}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}.hidden{display:none!important}