/* ===== Disponibilidad de los servidores (portal del usuario y panel del admin): se carga desde los dos; usa variables de los dos temas con valores de reserva ===== */
@keyframes sh-pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70% { box-shadow:0 0 0 9px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
@keyframes sh-pulse-bad { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--amber, var(--warn, #ff8e48)) 55%, transparent); } 70% { box-shadow:0 0 0 9px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
@keyframes sh-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.sh-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--ok); flex:none; animation:sh-pulse 2.2s ease-out infinite; }
.is-bad .sh-dot { background:var(--amber, var(--warn, #ff8e48)); animation-name:sh-pulse-bad; }
.sh-hero { position:relative; display:flex; align-items:center; justify-content:space-between; gap:clamp(14px,3vw,34px); flex-wrap:wrap; max-width:900px; padding:clamp(18px,2.6vw,30px); border-radius:22px; overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ok) 13%, transparent), transparent 55%), linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--surface) 70%, #000));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ok) 26%, var(--line, var(--border, rgba(255,255,255,.08)))), 0 18px 44px -22px rgba(0,0,0,.7); animation:sh-rise .5s ease both; }
.sh-hero.is-bad { background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--amber, var(--warn, #ff8e48)) 14%, transparent), transparent 55%), linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--surface) 70%, #000)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--amber, var(--warn, #ff8e48)) 30%, var(--line, var(--border, rgba(255,255,255,.08)))), 0 18px 44px -22px rgba(0,0,0,.7); }
.sh-state { display:flex; align-items:center; gap:clamp(12px,2vw,20px); min-width:0; flex:1 1 220px; }
.sh-ico { width:clamp(52px,6vw,72px); aspect-ratio:1; border-radius:20px; display:grid; place-items:center; flex:none; color:var(--ok-ink, #04170d); background:linear-gradient(135deg, var(--ok-hi), var(--ok)); box-shadow:0 8px 24px -8px color-mix(in srgb, var(--ok) 70%, transparent); }
.is-bad .sh-ico { color:#2a1300; background:linear-gradient(135deg,#ffbc78,#ff8e48 55%,#ea6628); box-shadow:0 8px 24px -8px rgba(255,142,72,.6); }
.sh-ico .app-icon { width:48%; height:48%; stroke-width:1.9; }
.sh-state-txt { min-width:0; }
.sh-state-txt h2 { font:italic 800 clamp(1.4rem,2.6vw,2.1rem)/1.1 var(--display); margin:0; overflow-wrap:anywhere; }
.sh-pill { display:inline-flex; align-items:center; gap:.55rem; margin:.55rem 0 0; padding:.3rem .85rem; border-radius:999px; font-weight:700; font-size:.92rem; color:var(--ok-hi); background:color-mix(in srgb, var(--ok) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent); }
.is-bad .sh-pill { color:var(--amber, var(--warn, #ff8e48)); background:color-mix(in srgb, var(--amber, var(--warn, #ff8e48)) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--amber, var(--warn, #ff8e48)) 38%, transparent); }
.sh-since { margin:.6rem 0 0; color:var(--muted); font-size:.95rem; font-weight:600; }
.sh-ring { --p:0; --c:var(--ok); position:relative; width:clamp(104px,14vw,144px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; flex:none; margin-inline:auto;
  background:conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255,255,255,.08) 0); filter:drop-shadow(0 0 16px color-mix(in srgb, var(--c) 38%, transparent)); }
.sh-ring::before { content:""; position:absolute; inset:9px; border-radius:50%; background:color-mix(in srgb, var(--surface) 88%, #000); }
.sh-ring > div { position:relative; text-align:center; padding:0 6px; }
.sh-ring b { display:block; font:800 clamp(1.05rem,2vw,1.4rem)/1.1 var(--display); letter-spacing:.01em; }
.sh-ring small { display:block; margin-top:.25rem; font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.sh-ring--warn { --c:var(--gold); } .sh-ring--bad { --c:var(--amber, var(--warn, #ff8e48)); } .sh-ring--none { --c:var(--faint, var(--muted)); }
.sh-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,1.6vw,14px); max-width:900px; margin-top:14px; animation:sh-rise .5s .08s ease both; }
.sh-kpi { padding:clamp(11px,1.8vw,16px); border-radius:16px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line, var(--border, rgba(255,255,255,.07))); min-width:0; }
.sh-kpi small { display:block; color:var(--muted); font-size:.76rem; font-weight:600; }
.sh-kpi b { display:block; margin:.3rem 0 .55rem; font:800 clamp(1.02rem,2.2vw,1.45rem)/1.1 var(--display); overflow-wrap:anywhere; }
.sh-meter { display:block; height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.sh-meter i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--ok), var(--ok-hi)); box-shadow:0 0 10px color-mix(in srgb, var(--ok) 60%, transparent); }
.sh-card { max-width:900px; margin-top:14px; padding:clamp(14px,2.2vw,22px); border-radius:20px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line, var(--border, rgba(255,255,255,.07))); animation:sh-rise .5s .14s ease both; }
.sh-card header { display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-bottom:14px; }
.sh-card h3 { margin:0; font:italic 700 clamp(1.02rem,1.6vw,1.25rem)/1.1 var(--display); }
.sh-card header span { color:var(--faint, var(--muted)); font-size:.8rem; }
.sh-bars { display:grid; grid-template-columns:repeat(30,minmax(0,1fr)); gap:3px; height:clamp(38px,6vw,56px); }
/* las barras son <button>: en el admin todos los botones tienen su propio estilo (relleno dorado, relieve, hover), así que se blindan con más especificidad */
.sh-bars button.sh-bar { appearance:none; -webkit-appearance:none; display:block; border:0; margin:0; padding:0; width:auto; height:auto; min-width:0; min-height:0; font-size:0; line-height:0; letter-spacing:0; text-transform:none;
  border-radius:4px; cursor:pointer; color:inherit; transition:transform .15s, filter .15s; }
.sh-bars button.sh-bar, .sh-bars button.sh-bar:hover, .sh-bars button.sh-bar:active, .sh-bars button.sh-bar:focus-visible { background:var(--ok); box-shadow:none; }
.sh-bars button.sh-bar.warn, .sh-bars button.sh-bar.warn:hover, .sh-bars button.sh-bar.warn:active, .sh-bars button.sh-bar.warn:focus-visible { background:var(--gold); }
.sh-bars button.sh-bar.bad, .sh-bars button.sh-bar.bad:hover, .sh-bars button.sh-bar.bad:active, .sh-bars button.sh-bar.bad:focus-visible { background:var(--amber, var(--warn, #ff8e48)); }
.sh-bars button.sh-bar.none, .sh-bars button.sh-bar.none:hover, .sh-bars button.sh-bar.none:active, .sh-bars button.sh-bar.none:focus-visible { background:rgba(255,255,255,.1); }
.sh-bars button.sh-bar:hover, .sh-bars button.sh-bar:focus-visible, .sh-bars button.sh-bar.on { transform:scaleY(1.14); filter:brightness(1.25); outline:none; }
.sh-bars button.sh-bar:active { transform:scaleY(1.14); }
.sh-tip { min-height:1.3em; margin:12px 0 4px; font-size:.86rem; font-weight:600; color:var(--text); }
.sh-axis { display:flex; justify-content:space-between; font-size:.72rem; color:var(--faint, var(--muted)); }
.sh-legend { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:12px 0 0; padding:0; font-size:.76rem; color:var(--muted); }
.sh-legend li::before { content:""; display:inline-block; width:9px; height:9px; margin-right:.4rem; border-radius:3px; background:var(--ok); vertical-align:baseline; }
.sh-legend .warn::before { background:var(--gold); } .sh-legend .bad::before { background:var(--amber, var(--warn, #ff8e48)); } .sh-legend .none::before { background:rgba(255,255,255,.2); }
.sh-note { margin:12px 0 0; font-size:.8rem; color:var(--faint, var(--muted)); }
.sh-chart { position:relative; color:var(--gold); height:clamp(130px,22vw,190px); margin:4px 0 8px; }
.sh-svg { display:block; width:100%; height:100%; overflow:visible; }
.sh-grid line { stroke:rgba(255,255,255,.07); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:3 5; }
.sh-line { fill:none; stroke:currentColor; stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 6px color-mix(in srgb, currentColor 60%, transparent)); }
.sh-end { position:absolute; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:var(--gold-hi, currentColor); box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 28%, transparent), 0 0 14px var(--gold); }
.sh-axis--3 span:nth-child(2) { text-align:center; flex:1; }
.sh-stats { display:flex; gap:clamp(18px,4vw,40px); margin-top:14px; }
.sh-stats b { display:block; font:800 clamp(1.2rem,2.6vw,1.7rem)/1 var(--display); color:var(--gold-hi, var(--gold)); }
.sh-stats small { color:var(--muted); font-size:.76rem; }
/* tarjeta de «Tu servidor» arriba del Inicio */
.mysrv { display:flex; align-items:center; gap:clamp(10px,1.8vw,18px); flex-wrap:wrap; padding:12px clamp(12px,2vw,18px); border-radius:18px; text-decoration:none; color:inherit;
  background:linear-gradient(120deg, color-mix(in srgb, var(--ok) 10%, var(--surface)), var(--surface) 60%); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ok) 24%, var(--line, var(--border, rgba(255,255,255,.07)))); transition:transform .15s, box-shadow .15s; }
.mysrv:hover { transform:translateY(-1px); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ok) 50%, transparent), 0 10px 30px -14px rgba(0,0,0,.7); }
.mysrv.is-bad { background:linear-gradient(120deg, color-mix(in srgb, var(--amber, var(--warn, #ff8e48)) 10%, var(--surface)), var(--surface) 60%); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--amber, var(--warn, #ff8e48)) 30%, var(--line, var(--border, rgba(255,255,255,.07)))); }
.mysrv-ico { width:40px; aspect-ratio:1; border-radius:12px; display:grid; place-items:center; flex:none; color:var(--ok-ink, #04170d); background:linear-gradient(135deg, var(--ok-hi), var(--ok)); }
.mysrv.is-bad .mysrv-ico { color:#2a1300; background:linear-gradient(135deg,#ffbc78,#ff8e48 55%,#ea6628); }
.mysrv-ico .app-icon { width:22px; height:22px; }
.mysrv-main { display:flex; flex-direction:column; min-width:0; flex:1 1 150px; }
.mysrv-main b { font-weight:800; font-size:1rem; overflow-wrap:anywhere; }
.mysrv-main small { display:flex; align-items:center; gap:.45rem; margin-top:.15rem; color:var(--muted); font-size:.8rem; font-weight:600; }
.mysrv-bars { display:grid; grid-template-columns:repeat(14,5px); gap:2px; height:26px; flex:none; }
.mysrv-bars i { border-radius:2px; background:var(--ok); } .mysrv-bars .warn { background:var(--gold); } .mysrv-bars .bad { background:var(--amber, var(--warn, #ff8e48)); } .mysrv-bars .none { background:rgba(255,255,255,.12); }
.mysrv-pct { display:flex; flex-direction:column; align-items:flex-end; flex:none; }
.mysrv-pct b { font:800 1.05rem/1 var(--display); } .mysrv-pct small { font-size:.68rem; color:var(--faint, var(--muted)); text-transform:uppercase; letter-spacing:.04em; }
.mysrv-go { display:grid; place-items:center; color:var(--faint, var(--muted)); flex:none; } .mysrv-go .app-icon { width:18px; height:18px; }
@media (max-width:560px) { .sh-hero { justify-content:center; } .sh-state { flex-basis:100%; } .sh-legend { gap:.3rem .8rem; } .mysrv-bars { order:5; width:100%; grid-template-columns:repeat(14,minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { .sh-dot, .sh-hero, .sh-kpis, .sh-card { animation:none; } .mysrv, .sh-bar { transition:none; } }


/* ----- panel del admin: todos los servidores ----- */
.av-top { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 18px; }
.av-stat { padding:14px 16px; border-radius:16px; background:var(--surface, #080e1c); box-shadow:inset 0 0 0 1px var(--line, var(--border, rgba(255,255,255,.08))); min-width:0; }
.av-stat small { display:block; color:var(--muted); font-size:.76rem; font-weight:600; }
.av-stat b { display:block; margin-top:.3rem; font:800 clamp(1.3rem,2.4vw,1.9rem)/1.05 var(--display); overflow-wrap:anywhere; }
.av-stat b em { font-style:normal; font-size:.55em; color:var(--muted); font-weight:600; }
.av-stat.bad b { color:var(--amber, var(--warn, #ff8e48)); } .av-stat.ok b { color:var(--ok-hi, var(--ok)); }
.av-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr)); gap:14px; align-items:start; }
.av-card { padding:clamp(14px,2vw,20px); border-radius:20px; min-width:0; background:radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--ok) 9%, transparent), transparent 55%), var(--surface, #080e1c); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ok) 22%, var(--line, var(--border, rgba(255,255,255,.08)))); }
.av-card.is-bad { background:radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--amber, var(--warn, #ff8e48)) 12%, transparent), transparent 55%), var(--surface, #080e1c); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--amber, var(--warn, #ff8e48)) 34%, var(--line, var(--border, rgba(255,255,255,.08)))); }
.av-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.av-head h3 { margin:0; min-width:0; overflow-wrap:anywhere; font:italic 800 1.2rem/1.1 var(--display); }
.av-card .sh-pill { margin:0; font-size:.82rem; padding:.22rem .7rem; }
.av-card .sh-since { margin:.5rem 0 0; font-size:.86rem; }
.av-card .sh-kpis { max-width:none; margin-top:12px; animation:none; }
.av-card .sh-kpi { padding:9px 11px; border-radius:12px; background:rgba(255,255,255,.03); box-shadow:none; }
.av-card .sh-kpi b { font-size:1.05rem; margin:.2rem 0 .4rem; }
.av-card .sh-bars { margin-top:14px; height:38px; }
.av-card .sh-tip { margin:8px 0 2px; font-size:.8rem; }
.av-card .sh-axis { margin-top:2px; }
.av-act { margin-top:12px; padding-top:12px; border-top:1px solid var(--line, var(--border, rgba(255,255,255,.08))); }
.av-act .av-act-h { display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; flex-wrap:wrap; font-size:.78rem; color:var(--muted); }
.av-act .av-act-h b { color:var(--gold-hi, var(--gold)); font-weight:700; }
.av-act .sh-chart { height:96px; margin:6px 0 2px; }
.av-note { margin:6px 0 0; font-size:.76rem; color:var(--faint, var(--muted)); }
@media (max-width:900px) { .av-top { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px) { .av-grid { grid-template-columns:minmax(0,1fr); } .av-top { gap:8px; } }
/* ----- tarjeta de servidor del Dashboard: espectadores y detalle de quién ve qué ----- */
.av-head-r { display:inline-flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.av-viewers { display:inline-flex; align-items:center; gap:.35rem; font:italic 800 1.1rem/1 var(--display); color:var(--accent, var(--gold)); }
.av-viewers .ic, .av-viewers svg { width:1.1em; height:1.1em; }
.av-watch { margin-top:12px; padding-top:10px; border-top:1px solid var(--line, var(--border, rgba(255,255,255,.08))); }
.av-watch summary { cursor:pointer; font-size:.82rem; color:var(--muted); list-style:none; }
.av-watch summary::-webkit-details-marker { display:none; }
.av-watch summary::before { content:"▸ "; } .av-watch[open] summary::before { content:"▾ "; }
.av-watch table { width:100%; }