/* ESPERA TU CANCIÓN 0.4.1 — MOTOR DE TEMAS
   Esta hoja controla SOLO presentación. La lógica operacional vive fuera de aquí. */
:root{
  --theme-primary:#2387ff;--theme-secondary:#8b41ff;--theme-accent:#00d7ff;
  --theme-bg:#050713;--theme-surface:#0a1021;--theme-surface2:#0e1730;
  --theme-text:#f3f7ff;--theme-muted:#91a4bf;--theme-primary-rgb:35,135,255;
  --theme-secondary-rgb:139,65,255;--theme-accent-rgb:0,215,255;--theme-bg-rgb:5,7,19;
  --theme-radius:16px;--theme-glow-strength:.7;--theme-font:Inter,Segoe UI,Arial,sans-serif;
  --bg:var(--theme-bg);--panel:var(--theme-surface);--panel2:var(--theme-surface2);
  --line:color-mix(in srgb,var(--theme-primary) 34%,#16243a);--cyan:var(--theme-accent);
  --blue:var(--theme-primary);--pink:var(--theme-secondary);--purple:var(--theme-secondary);
  --text:var(--theme-text);--muted:var(--theme-muted);--brand-glow:var(--theme-secondary);--brand-accent:var(--theme-accent);
}
html,body{font-family:var(--theme-font)!important;color:var(--theme-text)}
body{background:
 radial-gradient(circle at 16% 0%,rgba(var(--theme-secondary-rgb),calc(.24 * var(--theme-glow-strength))) 0,transparent 31%),
 radial-gradient(circle at 86% 7%,rgba(var(--theme-primary-rgb),calc(.22 * var(--theme-glow-strength))) 0,transparent 31%),
 linear-gradient(180deg,var(--theme-bg),color-mix(in srgb,var(--theme-bg) 82%,var(--theme-surface)) 60%,var(--theme-bg))!important}

/* Superficies */
.topbar,.side,.card,.box,.request-card,.venue-card,.user-card,.stats-columns>div,.stats-metrics>div,.rank-row,.qr-card{
 border-radius:var(--theme-radius)!important;
 border-color:color-mix(in srgb,var(--theme-primary) 28%,#233248)!important;
}
.topbar{background:color-mix(in srgb,var(--theme-surface) 94%,transparent)!important;box-shadow:0 0 calc(36px * var(--theme-glow-strength)) rgba(var(--theme-primary-rgb),.15)!important}
.side,.card,.box{background:linear-gradient(180deg,color-mix(in srgb,var(--theme-surface) 96%,transparent),color-mix(in srgb,var(--theme-bg) 92%,var(--theme-surface2)))!important}
.input{background:color-mix(in srgb,var(--theme-bg) 72%,var(--theme-surface2))!important;border-color:color-mix(in srgb,var(--theme-primary) 26%,#304159)!important;color:var(--theme-text)!important;border-radius:calc(var(--theme-radius) * .72)!important}
.input:focus{border-color:var(--theme-accent)!important;box-shadow:0 0 0 3px rgba(var(--theme-accent-rgb),.14)!important}
.muted,.meta,.venue-card small,.user-copy span,.user-copy small{color:var(--theme-muted)!important}

/* Navegación */
.nav button{border-radius:calc(var(--theme-radius) * .7)!important}
.nav button.active,.nav button:hover{background:linear-gradient(90deg,var(--theme-primary),color-mix(in srgb,var(--theme-secondary) 75%,var(--theme-primary)))!important;box-shadow:0 0 calc(22px * var(--theme-glow-strength)) rgba(var(--theme-primary-rgb),.2)!important}
.brand .mic,.login-logo,.client-logo .mic{filter:drop-shadow(0 0 calc(18px * var(--theme-glow-strength)) rgba(var(--theme-secondary-rgb),.9))!important}
.brand small,.public-link,.register-link{color:var(--theme-accent)!important}

/* Botones semánticos: conservan significado pero heredan identidad visual */
.btn{border-radius:calc(var(--theme-radius) * .7)!important}
.btn.cyan{background:linear-gradient(90deg,var(--theme-primary),var(--theme-accent))!important}
.btn.purple{background:linear-gradient(90deg,var(--theme-secondary),color-mix(in srgb,var(--theme-secondary) 72%,var(--theme-primary)))!important}
.btn.ghost{background:color-mix(in srgb,var(--theme-surface2) 78%,transparent)!important;border:1px solid color-mix(in srgb,var(--theme-primary) 28%,#27394d)!important}

/* Cola / panel Karaokista */
.hero{border-color:var(--theme-secondary)!important;background:
 radial-gradient(circle at 20% 0,rgba(var(--theme-secondary-rgb),.28),transparent 46%),
 linear-gradient(125deg,color-mix(in srgb,var(--theme-surface2) 72%,var(--theme-secondary)),color-mix(in srgb,var(--theme-bg) 72%,var(--theme-primary)))!important;
 box-shadow:0 0 calc(36px * var(--theme-glow-strength)) rgba(var(--theme-secondary-rgb),.22) inset,0 0 calc(26px * var(--theme-glow-strength)) rgba(var(--theme-secondary-rgb),.18)!important}
.live-label{color:color-mix(in srgb,var(--theme-secondary) 72%,white)!important}.next{background:linear-gradient(180deg,color-mix(in srgb,var(--theme-surface2) 86%,var(--theme-primary)),var(--theme-surface))!important;border-color:color-mix(in srgb,var(--theme-primary) 50%,#1a344f)!important}.next-wait,.metric-big{color:var(--theme-accent)!important}
.tablewrap{border-color:color-mix(in srgb,var(--theme-primary) 24%,#24384d)!important}.table th{background:color-mix(in srgb,var(--theme-surface2) 88%,var(--theme-primary))!important;color:color-mix(in srgb,var(--theme-accent) 75%,white)!important}.table td{border-color:color-mix(in srgb,var(--theme-primary) 14%,#17293e)!important}.table tr:hover td{background:color-mix(in srgb,var(--theme-surface2) 82%,var(--theme-primary))!important}
.request-card,.venue-card,.user-card,.rank-row{background:color-mix(in srgb,var(--theme-surface2) 84%,var(--theme-bg))!important}.venue-card.current{border-color:var(--theme-secondary)!important;box-shadow:0 0 calc(24px * var(--theme-glow-strength)) rgba(var(--theme-secondary-rgb),.18)!important}.avatar{background:linear-gradient(135deg,var(--theme-primary),var(--theme-secondary))!important}

/* Cliente móvil */
.step-title>span{background:linear-gradient(135deg,var(--theme-primary),var(--theme-secondary))!important}.song-result{background:color-mix(in srgb,var(--theme-surface) 88%,var(--theme-bg))!important;border-color:color-mix(in srgb,var(--theme-primary) 26%,#293f69)!important;border-radius:calc(var(--theme-radius) * .78)!important}.song-result:hover{border-color:var(--theme-secondary)!important;background:color-mix(in srgb,var(--theme-surface2) 88%,var(--theme-secondary))!important}.song-icon{background:color-mix(in srgb,var(--theme-secondary) 14%,var(--theme-surface2))!important;color:color-mix(in srgb,var(--theme-secondary) 75%,white)!important}.sent-check{background:linear-gradient(135deg,var(--theme-primary),var(--theme-secondary))!important;box-shadow:0 0 calc(34px * var(--theme-glow-strength)) rgba(var(--theme-secondary-rgb),.32)!important}

/* Pantalla pública */
.public-v2{background:
 radial-gradient(circle at 14% 5%,rgba(var(--theme-secondary-rgb),calc(.31 * var(--theme-glow-strength))) 0,transparent 29%),
 radial-gradient(circle at 88% 8%,rgba(var(--theme-primary-rgb),calc(.28 * var(--theme-glow-strength))) 0,transparent 31%),
 linear-gradient(180deg,var(--theme-bg),color-mix(in srgb,var(--theme-bg) 88%,var(--theme-surface)))!important}
.on-air-v2{border-color:var(--theme-secondary)!important;background:
 radial-gradient(circle at 50% 18%,rgba(var(--theme-primary-rgb),.23),transparent 45%),
 linear-gradient(120deg,color-mix(in srgb,var(--theme-surface2) 64%,var(--theme-secondary)),color-mix(in srgb,var(--theme-bg) 68%,var(--theme-primary)))!important;
 box-shadow:0 0 calc(90px * var(--theme-glow-strength)) rgba(var(--theme-secondary-rgb),.20) inset,0 0 calc(38px * var(--theme-glow-strength)) rgba(var(--theme-primary-rgb),.17)!important}
.on-air-badge{background:color-mix(in srgb,var(--theme-secondary) 20%,var(--theme-bg))!important;border-color:color-mix(in srgb,var(--theme-secondary) 55%,#522)!important;color:color-mix(in srgb,var(--theme-secondary) 55%,white)!important}.on-air-name{text-shadow:0 0 calc(38px * var(--theme-glow-strength)) rgba(var(--theme-primary-rgb),.42)!important}.equalizer i{background:linear-gradient(var(--theme-secondary),var(--theme-accent))!important}.section-icon{background:linear-gradient(145deg,color-mix(in srgb,var(--theme-primary) 25%,var(--theme-surface2)),color-mix(in srgb,var(--theme-secondary) 25%,var(--theme-surface2)))!important}.public-list-v2 .public-row{background:linear-gradient(90deg,color-mix(in srgb,var(--theme-surface) 86%,var(--theme-bg)),color-mix(in srgb,var(--theme-surface2) 84%,var(--theme-bg)))!important;border-color:color-mix(in srgb,var(--theme-primary) 25%,#203e66)!important}.public-list-v2 .public-row.first{border-color:color-mix(in srgb,var(--theme-secondary) 62%,var(--theme-primary))!important;background:linear-gradient(90deg,color-mix(in srgb,var(--theme-primary) 24%,var(--theme-surface2)),color-mix(in srgb,var(--theme-secondary) 21%,var(--theme-surface)))!important;box-shadow:0 0 calc(30px * var(--theme-glow-strength)) rgba(var(--theme-secondary-rgb),.18)!important}.public-list-v2 .first .public-pos{background:linear-gradient(145deg,var(--theme-secondary),var(--theme-primary))!important}.public-footer-v2{background:color-mix(in srgb,var(--theme-surface) 88%,transparent)!important;border-color:color-mix(in srgb,var(--theme-primary) 23%,#15375d)!important}.public-call b{color:var(--theme-text)!important}

/* Editor de temas */
.theme-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}.theme-preset{appearance:none;border:1px solid color-mix(in srgb,var(--theme-primary) 25%,#314054);background:var(--theme-surface2);color:var(--theme-text);border-radius:14px;padding:12px;text-align:left;cursor:pointer;min-height:86px}.theme-preset:hover,.theme-preset.active{border-color:var(--theme-accent);box-shadow:0 0 20px rgba(var(--theme-accent-rgb),.16)}.theme-preset span{display:flex;gap:5px;margin-bottom:8px}.theme-preset i{display:block;width:20px;height:20px;border-radius:7px}.theme-preset b,.theme-preset small{display:block}.theme-preset small{color:var(--theme-muted);margin-top:3px}.theme-editor{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:16px}.theme-controls,.theme-preview{border:1px solid color-mix(in srgb,var(--theme-primary) 24%,#324155);border-radius:var(--theme-radius);padding:16px;background:color-mix(in srgb,var(--theme-surface2) 78%,var(--theme-bg))}.theme-color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.color-field{display:grid;grid-template-columns:1fr 50px;gap:8px;align-items:center}.color-field input[type=color]{width:50px;height:42px;padding:3px;border:1px solid color-mix(in srgb,var(--theme-primary) 25%,#34475f);border-radius:10px;background:var(--theme-bg)}.range-line{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.theme-sample{min-height:270px;border-radius:calc(var(--theme-radius) * 1.2);padding:18px;background:radial-gradient(circle at 20% 0,rgba(var(--theme-secondary-rgb),.28),transparent 42%),linear-gradient(135deg,var(--theme-surface2),var(--theme-bg));border:1px solid var(--theme-secondary);box-shadow:0 0 calc(34px * var(--theme-glow-strength)) rgba(var(--theme-secondary-rgb),.2) inset}.theme-sample .sample-chip{display:inline-block;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--theme-primary) 28%,var(--theme-bg));color:var(--theme-accent);font-size:11px;font-weight:900}.theme-sample h2{font-size:34px;margin:16px 0 6px}.theme-sample p{color:var(--theme-muted)}.theme-sample .sample-row{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid color-mix(in srgb,var(--theme-primary) 18%,transparent)}.theme-sample .sample-row strong:last-child{color:var(--theme-accent)}
@media(max-width:1050px){.theme-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-editor{grid-template-columns:1fr}}
@media(max-width:560px){.theme-presets,.theme-color-grid{grid-template-columns:1fr}.theme-preset{min-height:auto}.theme-editor{grid-template-columns:1fr}}