:root{
  --bg:#07111f;--panel:#0e1c2d;--panel2:#13263d;--line:rgba(255,255,255,.09);
  --text:#f7f9fc;--muted:#8fa4bc;--accent:#5d8dff;--green:#32d695;--red:#ff435e;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
button,input{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
.hidden{display:none!important}
.muted{color:var(--muted)}
.brand-badge{display:inline-flex;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.045);font-weight:900;font-size:12px;letter-spacing:.14em}
.btn{border:0;border-radius:12px;padding:13px 17px;font-weight:800;display:inline-flex;justify-content:center;align-items:center;gap:8px}
.primary{background:var(--accent);color:#fff}
.secondary{background:#17314e;color:#eef5ff;border:1px solid var(--line)}
.ghost{background:transparent;color:#d3dfec;border:1px solid var(--line)}
.live{background:var(--red);color:#fff;padding:16px 22px;box-shadow:0 10px 30px rgba(255,67,94,.2)}
.compact{padding:9px 13px;font-size:13px}
.full{width:100%}
.eyebrow{font-size:11px;letter-spacing:.16em;color:#87a9ff;font-weight:900}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(50,214,149,.09)}
.live-chip,.connected-chip{padding:8px 11px;border-radius:999px;font-size:12px;font-weight:900}
.live-chip{color:#ff9cab;background:rgba(255,67,94,.11);border:1px solid rgba(255,67,94,.25)}
.connected-chip{color:#96f1c9;background:rgba(50,214,149,.08);border:1px solid rgba(50,214,149,.2)}
.auth-page{display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 20% 10%,rgba(93,141,255,.13),transparent 35%),var(--bg)}
.auth-shell{width:min(1060px,100%);display:grid;grid-template-columns:1.08fr .92fr;background:rgba(12,27,45,.9);border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 34px 100px rgba(0,0,0,.34)}
.brand-panel{padding:56px;background:radial-gradient(circle at 10% 10%,rgba(93,141,255,.2),transparent 38%),#0b1727}
.brand-panel h1{font-size:clamp(38px,5vw,64px);line-height:1.02;margin:28px 0 16px}
.brand-panel p{color:var(--muted);font-size:18px;line-height:1.6;margin-bottom:32px}
.feature{margin:14px 0;color:#dbe6f3}
.auth-card{padding:48px}
.login-header{margin-bottom:28px}
.login-header h2{font-size:28px;margin:0 0 8px;color:#fff}
.login-header p{margin:0;font-size:14px}
.tabs{display:flex;padding:5px;background:rgba(255,255,255,.04);border-radius:14px;margin-bottom:28px}
.tab{flex:1;border:0;background:transparent;color:var(--muted);padding:12px;border-radius:10px}
.tab.active{background:#172b44;color:#fff}
.form{display:grid;gap:17px}
.form label,.guest-join label{display:grid;gap:8px;color:#c9d6e4;font-size:14px}
input{width:100%;padding:14px;border-radius:12px;border:1px solid var(--line);background:#07131f;color:#fff;outline:none}
input:focus{border-color:rgba(93,141,255,.7);box-shadow:0 0 0 3px rgba(93,141,255,.1)}
.form small{color:var(--muted);line-height:1.5}
.message{margin-top:14px;padding:12px;border-radius:10px;background:rgba(255,67,94,.1);color:#ffc1cb}
.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid var(--line);background:rgba(7,17,31,.94)}
.top-actions{display:flex;gap:12px;align-items:center}
.dashboard{width:min(1160px,91vw);margin:42px auto 70px}
.welcome{min-height:250px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:40px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 85% 10%,rgba(93,141,255,.2),transparent 32%),var(--panel)}
.welcome h1{font-size:clamp(32px,4.5vw,50px);margin:10px 0}
.welcome p{color:var(--muted);font-size:17px}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:18px}
.quick-card{display:grid;grid-template-columns:auto 1fr;gap:15px;padding:23px;border:1px solid var(--line);border-radius:19px;background:var(--panel)}
.quick-card .btn{grid-column:1/-1}
.quick-card h3{margin:1px 0 5px}.quick-card p{margin:0;color:var(--muted);line-height:1.45;font-size:14px}
.quick-icon{font-size:27px}
.info-strip{display:flex;justify-content:space-between;gap:12px;margin-top:18px;padding:18px 22px;border:1px solid var(--line);border-radius:16px;color:var(--muted);background:rgba(14,28,45,.75);font-size:13px}
.info-strip span:first-child{color:#dbe6f2}.info-strip .dot{margin-right:8px}
.studio-main{width:min(1480px,95vw);margin:20px auto 35px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}
.program-shell,.side-panel{background:var(--panel);border:1px solid var(--line);border-radius:20px}
.program-shell{padding:18px}
.program-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 15px}
.program-head h2{margin:6px 0 0}
.program-video,.guest-video,.public-video{position:relative;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.program-video iframe,.guest-video iframe,.public-video iframe{width:100%;height:100%;border:0;background:#000}
.waiting-overlay{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:9px;background:#050b12;color:#eef5ff;transition:.25s}
.waiting-overlay span{color:var(--muted);font-size:13px}
.spinner{width:36px;height:36px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:#7aa0ff;margin:0 auto 7px;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.control-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:12px}
.guest-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}
.control{min-height:82px;border:1px solid var(--line);border-radius:14px;background:#101f32;color:#dfeaf6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.control:hover{background:#152942}
.control.active{border-color:rgba(50,214,149,.22);background:rgba(50,214,149,.07)}
.control.off{border-color:rgba(255,67,94,.25);background:rgba(255,67,94,.08)}
.control.danger{border-color:rgba(255,67,94,.2);color:#ff9eac}
.control-icon{font-size:21px}.control span:nth-child(2){font-weight:800;font-size:13px}.control small{color:var(--muted);font-size:10px}
.side-panel{padding:23px}.side-panel h3{margin:0 0 8px}.side-panel>p{color:var(--muted);line-height:1.55;font-size:14px}
.tip,.technical-note{margin-top:18px;padding:15px;border-radius:13px;background:#0a1726;border:1px solid var(--line);display:grid;gap:6px}
.tip span,.technical-note{color:var(--muted);font-size:12px;line-height:1.5}
.engine-frame{position:fixed!important;left:-10000px!important;top:-10000px!important;width:2px!important;height:2px!important;opacity:.01!important;border:0!important;pointer-events:none!important}
.toast{position:fixed;right:20px;bottom:20px;z-index:100;padding:13px 16px;background:#15304c;border:1px solid var(--line);border-radius:12px;box-shadow:0 15px 40px rgba(0,0,0,.3);opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none}
.toast.show{opacity:1;transform:none}

/* TARJETA PARA COMPARTIR ENLACE Y REDES SOCIALES */
.share-card{margin-top:18px;padding:16px;border-radius:14px;background:#0a1726;border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.share-card-title{font-size:12px;font-weight:700;color:#9bb2cc;text-transform:uppercase;letter-spacing:.05em}
.share-link-box{display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);padding:8px 12px;border-radius:9px;cursor:pointer;transition:border-color .2s ease,background .2s ease;gap:8px}
.share-link-box:hover{border-color:var(--accent);background:rgba(37,99,235,.1)}
.share-link-text{font-size:13px;color:#60a5fa;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:monospace}
.btn-copy-icon{background:transparent;border:0;cursor:pointer;font-size:14px;padding:2px;line-height:1;opacity:.8;transition:opacity .2s}
.btn-copy-icon:hover{opacity:1}
.share-social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:2px}
.social-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 4px;border-radius:9px;text-decoration:none;font-size:11px;font-weight:700;transition:transform .15s ease,opacity .15s ease;color:#fff}
.social-btn:hover{transform:translateY(-2px);opacity:.9}
.social-btn svg{display:block}
.social-btn.wa{background:#25D366;color:#fff}
.social-btn.fb{background:#1877F2;color:#fff}
.social-btn.tw{background:#000;color:#fff;border:1px solid rgba(255,255,255,.25)}
.social-btn.tg{background:#229ED9;color:#fff}
.public-share-card{margin-top:24px;max-width:580px}

/* CAPA DE OVERLAYS EN VIVO */
.video-overlay{position:absolute;inset:0;pointer-events:none;z-index:10;display:flex;flex-direction:column;justify-content:space-between;padding:24px;box-sizing:border-box;overflow:hidden}

/* BOTÓN Y OVERLAY DE INICIO / PLAY CON AUDIO */
.play-prompt-overlay{position:absolute;inset:0;z-index:15;background:rgba(5,11,18,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer;transition:opacity .35s ease,visibility .35s ease}
.play-prompt-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.play-prompt-btn{background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:#fff;border:1px solid rgba(255,255,255,.2);padding:16px 32px;border-radius:50px;box-shadow:0 12px 35px rgba(37,99,235,.45);display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;text-align:center}
.play-prompt-btn:hover{transform:scale(1.05);box-shadow:0 16px 45px rgba(37,99,235,.6)}
.play-prompt-btn:active{transform:scale(.98)}
.play-prompt-row{display:flex;align-items:center;gap:10px}
.play-prompt-icon{font-size:20px;line-height:1;background:rgba(255,255,255,.22);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;margin-left:-4px}
.play-prompt-text{font-size:16px;font-weight:800;letter-spacing:-.01em}
.play-prompt-sub{font-size:12px;color:rgba(255,255,255,.85);font-weight:600}
.live-logo-container{position:absolute;top:20px;right:24px;max-width:140px;max-height:70px;display:flex;align-items:center;justify-content:flex-end;transition:opacity .35s ease,transform .35s ease}
.live-logo-img{max-width:100%;max-height:60px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.65))}

.live-lower-third{position:absolute;bottom:24px;left:24px;max-width:calc(100% - 48px);display:flex;border-radius:12px;overflow:hidden;background:rgba(7,17,31,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 36px rgba(0,0,0,.6);transition:all .35s cubic-bezier(.16,1,.3,1)}
.live-lower-third.entering{animation:ltSlideIn .4s cubic-bezier(.16,1,.3,1) forwards}
.live-lower-third.exiting{animation:ltSlideOut .35s cubic-bezier(.7,0,.84,0) forwards}
@keyframes ltSlideIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ltSlideOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(20px) scale(.96)}}

.lower-third-bar{width:6px;background:linear-gradient(180deg,#5d8dff,#32d695);flex-shrink:0}
.lower-third-content{padding:10px 18px;display:flex;flex-direction:column;gap:3px}
.lower-third-title{color:#fff;font-size:clamp(14px,1.8vw,20px);font-weight:800;line-height:1.2;letter-spacing:-.01em;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.lower-third-subtitle{color:#a5c7f0;font-size:clamp(12px,1.3vw,15px);font-weight:500;line-height:1.2}

/* PESTAÑAS LATERALES Y PANEL DE GRÁFICOS */
.side-tabs{display:flex;gap:6px;background:rgba(255,255,255,.04);padding:4px;border-radius:12px;margin-bottom:18px}
.side-tab{flex:1;border:0;background:transparent;color:var(--muted);padding:9px 12px;border-radius:9px;font-weight:700;font-size:13px;transition:.2s}
.side-tab.active{background:#172b44;color:#fff}
.side-section{display:flex;flex-direction:column;gap:14px}
.graphics-group{display:flex;flex-direction:column;gap:10px}
.group-header{display:flex;justify-content:space-between;align-items:center}
.group-header h4,.graphics-group h4{margin:0;font-size:14px;font-weight:700;color:#e2eaf4}
.side-divider{border:0;height:1px;background:var(--line);margin:6px 0}
.form-group-side{display:flex;flex-direction:column;gap:5px}
.form-group-side label{font-size:12px;color:var(--muted);font-weight:600}
.form-group-side input{padding:10px 12px;font-size:13px;border-radius:10px}

/* SWITCH TOGGLE */
.switch{position:relative;display:inline-block;width:40px;height:22px;margin:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:#17283c;transition:.3s;border-radius:22px;border:1px solid var(--line)}
.slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background:#8fa4bc;transition:.3s;border-radius:50%}
input:checked + .slider{background:#295899;border-color:var(--accent)}
input:checked + .slider:before{transform:translateX(18px);background:#fff}

/* LOGO UPLOADER */
.logo-uploader{display:flex;flex-direction:column;gap:8px}
.logo-preview-box{height:60px;border:1px dashed var(--line);border-radius:10px;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px}
.logo-mini-preview{max-height:100%;max-width:100%;object-fit:contain}
.muted-text{font-size:12px;color:var(--muted)}
.logo-btn-row{display:flex;gap:8px;align-items:center}
.file-label{cursor:pointer;margin:0}

/* MINI PREVIEW CARD */
.mini-preview-card{padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;margin:4px 0}
.preview-tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.mini-lt-box{display:flex;border-radius:8px;overflow:hidden;background:#07111f;border:1px solid rgba(255,255,255,.1)}
.mini-lt-bar{width:4px;background:linear-gradient(180deg,#5d8dff,#32d695);flex-shrink:0}
.mini-lt-content{padding:6px 10px;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.mini-lt-content strong{font-size:12px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-lt-content span{font-size:11px;color:#8fa4bc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.action-lt-btn{margin-top:4px;transition:.2s}
.action-lt-btn.active{background:var(--red);box-shadow:0 4px 18px rgba(255,67,94,.25)}

/* PANTALLA DE SERVICIO SUSPENDIDO O ERROR DE TOKEN */
.suspended-overlay{position:fixed;inset:0;background:rgba(5,11,18,.96);z-index:9999;display:grid;place-items:center;padding:24px;text-align:center}
.suspended-card{width:min(500px,100%);padding:40px 32px;background:var(--panel);border:1px solid rgba(255,67,94,.3);border-radius:24px;box-shadow:0 25px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;gap:14px}
.suspended-icon{font-size:48px;line-height:1}
.suspended-card h2{margin:0;font-size:24px;color:#ff9eac}
.suspended-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.suspended-card .btn{margin-top:10px}

.guest-page{display:grid;place-items:center;padding:24px;min-height:100vh}
.guest-shell{width:min(1100px,96vw)}
.guest-join{width:min(520px,100%);margin:auto;padding:35px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}
.guest-join h1{font-size:34px;margin:24px 0 10px}.guest-join p{color:var(--muted);line-height:1.6;margin-bottom:24px}.guest-join .btn{margin-top:16px}
.guest-studio{padding:18px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}
.guest-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.guest-top h2{margin:5px 0 0}
.guest-controls{grid-template-columns:repeat(4,1fr)}
.public-header{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw}
.public-main{width:min(1180px,93vw);margin:16px auto 60px}.public-main h1{margin:20px 0 4px}.public-main p{margin:0;color:var(--muted)}
@media(max-width:980px){
  .studio-main{grid-template-columns:1fr}.side-panel{order:2}.control-bar{grid-template-columns:repeat(3,1fr)}
  .quick-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .auth-shell{grid-template-columns:1fr}.brand-panel{display:none}.auth-card{padding:28px}
  .welcome{flex-direction:column;align-items:flex-start}.top-actions #userName{display:none}
  .info-strip{flex-direction:column}.control-bar,.guest-controls{grid-template-columns:repeat(2,1fr)}
  .studio-main{width:96vw}.program-shell{padding:10px}.guest-join{padding:25px}
}