:root{
  --noche:#0B1014;--noche-2:#101920;--panel:#16222B;--linea:#263945;
  --ambar:#F2A33C;--ambar-suave:#FFD08A;--senal:#3DDC7F;--alerta:#FF5252;
  --texto:#E9F0F4;--tenue:#8DA3B0;--r:14px;
  
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--noche);color:var(--texto);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:"Barlow Condensed",Inter,sans-serif;margin:0;letter-spacing:.01em}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.oculto{display:none!important}

@keyframes entra{from{opacity:0;transform:translateY(6px)}}

/* -------- barra Ruteros -------- */
.barra{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--linea);background:linear-gradient(180deg,#0E161C,#0B1014)}
.marca{display:flex;align-items:center;gap:10px;min-width:0}
.marca-icono{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;color:var(--noche);
  background:linear-gradient(160deg,var(--ambar-suave),var(--ambar));box-shadow:0 6px 18px -8px var(--ambar)}
.marca-texto{display:flex;flex-direction:column;min-width:0}
.marca-texto b{font-family:"Barlow Condensed",Inter,system-ui,sans-serif;font-size:24px;font-weight:700;line-height:1}
.marca-texto small{color:var(--tenue);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-barra{flex:0 0 auto;padding:9px 14px;border-radius:999px;font-size:14px;border:1px solid var(--linea);background:var(--panel)}
.contenido{padding:18px 16px 40px;max-width:640px;margin:0 auto}

/* -------- dial (radio general) -------- */
.dial{position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--linea);
  background:radial-gradient(90% 120% at 50% 0%,#1E3038 0%,#101A21 55%,#0C1319 100%);
  padding:22px 18px 18px;margin-bottom:26px;box-shadow:0 26px 50px -30px #000}
.dial-escala{position:absolute;inset:0 0 auto;height:34px;
  background-image:repeating-linear-gradient(90deg,var(--linea) 0 1px,transparent 1px 13px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);opacity:.7}
.dial-escala::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ambar);
  box-shadow:0 0 12px 2px var(--ambar);animation:aguja 9s ease-in-out infinite}
@keyframes aguja{0%,100%{left:18%}50%{left:78%}}
.dial-frec{position:absolute;top:36px;right:16px;font-family:"Barlow Condensed",Inter,system-ui,sans-serif;font-size:14px;color:var(--ambar);opacity:.85}
.dial-cuerpo{position:relative;padding-top:26px}
.dial-sub{margin:0 0 2px;color:var(--ambar);font-size:13px;font-weight:600}
.dial-titulo{font-size:44px;font-weight:700;line-height:1;margin-bottom:8px}
.dial-desc{margin:0 0 14px;color:var(--tenue);max-width:34ch}
.dial-estado{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.dial-nota{color:var(--tenue);font-size:13px;margin:10px 0 0}
.pastilla{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:13px;
  background:var(--panel);border:1px solid var(--linea);color:var(--tenue)}
.pastilla .punto{width:8px;height:8px;border-radius:50%;background:#4B5C66}
.pastilla.viva{color:var(--texto);border-color:#255C3D;background:#123024}
.pastilla.viva .punto{background:var(--senal);animation:latido 1.8s infinite}
.pastilla.aire{color:#25190A;background:var(--ambar);border-color:var(--ambar);font-weight:600}
@keyframes latido{0%{box-shadow:0 0 0 0 #3DDC7F99}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ondas{position:absolute;right:-6px;bottom:-4px;display:flex;align-items:flex-end;gap:4px;height:70px;opacity:.45;pointer-events:none}
.ondas i{width:5px;border-radius:3px;background:linear-gradient(180deg,var(--ambar),transparent);height:20%;animation:onda 1.6s ease-in-out infinite}
.ondas i:nth-child(2){animation-delay:.15s}.ondas i:nth-child(3){animation-delay:.3s}.ondas i:nth-child(4){animation-delay:.45s}
.ondas i:nth-child(5){animation-delay:.6s}.ondas i:nth-child(6){animation-delay:.75s}.ondas i:nth-child(7){animation-delay:.9s}
@keyframes onda{0%,100%{height:18%}50%{height:85%}}

/* -------- botones -------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:12px;border:0;
  background:linear-gradient(160deg,var(--ambar-suave),var(--ambar));color:#25190A;font-weight:600;font-size:16px;box-shadow:0 12px 24px -14px var(--ambar)}
.boton:active{transform:translateY(1px)}
.boton.grande{width:100%;padding:16px;font-size:18px}
.boton.chico{padding:9px 14px;font-size:14px}
.boton.wsp{background:linear-gradient(160deg,#4FE07A,#25A75A);color:#062312;width:100%;margin-top:10px}
.boton.gris{background:var(--panel);color:var(--texto);border:1px solid var(--linea);box-shadow:none}
.btn-linea{padding:8px 13px;border-radius:999px;font-size:14px;border:1px solid var(--ambar);color:var(--ambar);background:none}
.btn-texto{display:inline-block;margin-top:14px;color:var(--tenue);font-size:14px;background:none;border:0;border-bottom:1px solid var(--linea)}

/* -------- lista de grupos -------- */
.bloque{margin-bottom:28px}
.bloque-cabeza{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.bloque h2{font-size:26px;font-weight:600}
.filtros{display:flex;gap:8px;overflow-x:auto;margin:-2px 0 12px;scrollbar-width:none}
.filtros button{flex:0 0 auto;padding:6px 12px;border-radius:999px;font-size:13px;background:none;border:1px solid var(--linea);color:var(--tenue)}
.filtros button[aria-pressed="true"]{border-color:var(--texto);color:var(--texto)}
.grupos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.grupo{display:flex;align-items:center;gap:13px;padding:13px 14px;border:1px solid var(--linea);border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel),#121C24);position:relative;overflow:hidden;width:100%;text-align:left}
.grupo.activo{border-color:#2C6B49}
.grupo.activo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--senal)}
.grupo.aire::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#F2A33C14,transparent);animation:barrido 2.4s linear infinite}
@keyframes barrido{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.grupo-emoji{font-size:26px;width:46px;height:46px;flex:0 0 46px;border-radius:12px;display:grid;place-items:center;background:#0E171E;border:1px solid var(--linea)}
.grupo-info{display:flex;flex-direction:column;min-width:0;flex:1}
.grupo-info b{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grupo-info small{color:var(--tenue);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grupo-info small.hab{color:var(--ambar)}
.grupo-vivo{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--senal);position:relative;z-index:1}
.grupo-vivo em{color:var(--tenue);font-style:normal;font-weight:400;font-size:13px}
.grupo-vivo .punto{width:8px;height:8px;border-radius:50%;background:var(--senal);box-shadow:0 0 8px var(--senal)}
.fila-codigo{display:flex;gap:9px;margin-top:10px}
.fila-codigo input{flex:1;min-width:0;padding:13px 14px;border-radius:12px;background:#0E171E;border:1px solid var(--linea);letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.ayuda{color:var(--tenue);font-size:13px;margin:9px 0 0}

/* -------- formularios -------- */
.campo{display:block;margin-bottom:14px}
.campo>span{display:block;font-size:13px;color:var(--tenue);margin-bottom:6px}
.campo input,.campo select{width:100%;padding:13px 14px;border-radius:12px;background:#0E171E;border:1px solid var(--linea)}
.campo input:focus,.campo select:focus,.fila-codigo input:focus{outline:2px solid var(--ambar);outline-offset:1px;border-color:transparent}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;align-items:flex-start;gap:10px;margin:6px 0 16px;color:var(--tenue);font-size:14px}
.check input{width:20px;height:20px;accent-color:var(--ambar);margin-top:1px;flex:0 0 20px}
.tarjeta{border:1px solid var(--linea);border-radius:var(--r);background:linear-gradient(180deg,var(--panel),#121C24);padding:18px}
.emojis{display:flex;flex-wrap:wrap;gap:8px}
.emojis button{width:46px;height:46px;border-radius:12px;background:#0E171E;border:1px solid var(--linea);font-size:22px}
.emojis button[aria-pressed="true"]{border-color:var(--ambar);background:#231A0C}
.segmento{display:flex;background:#0E171E;border:1px solid var(--linea);border-radius:12px;padding:4px;gap:4px}
.segmento button{flex:1;padding:10px;border-radius:9px;background:none;border:0;color:var(--tenue);font-size:14px}
.segmento button[aria-pressed="true"]{background:var(--panel);color:var(--texto);box-shadow:inset 0 0 0 1px var(--linea)}

/* -------- grupo creado -------- */
.creado{text-align:center;padding-top:10px}
.sello{width:86px;height:86px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;font-size:40px;
  background:radial-gradient(circle,#1F6B45,#0E2A1D);box-shadow:0 0 0 8px #3DDC7F1A,0 0 0 16px #3DDC7F0D;animation:aparece .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes aparece{from{transform:scale(.4);opacity:0}}
.credencial{margin:18px 0;border-radius:16px;border:1px dashed var(--ambar);background:#1A150C;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.credencial div{text-align:center}
.credencial small{display:block;color:var(--tenue);font-size:12px}
.credencial b{font-family:"Barlow Condensed",Inter,system-ui,sans-serif;font-size:34px;letter-spacing:.12em;color:var(--ambar-suave)}

/* -------- puerta -------- */
.puerta{min-height:100dvh;display:grid;place-items:center;padding:24px 18px}
.puerta-caja{width:100%;max-width:400px;text-align:center}
.puerta-emoji{font-size:52px;display:block;margin-bottom:6px}
.puerta h1{font-size:36px;font-weight:700;line-height:1.05}
.puerta-desc{color:var(--tenue);margin:6px 0 22px}
.puerta .campo{text-align:left}
.puerta-error{color:var(--alerta);min-height:20px;font-size:14px;margin:10px 0 0}
.puerta-nota{color:var(--tenue);font-size:13px;margin:12px 0 0}
.sacude{animation:sacude .35s}
@keyframes sacude{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* -------- sala en vivo -------- */
.radio{min-height:100dvh;display:flex;flex-direction:column;position:relative}
.radio-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--linea);background:#0E161C}
.radio-titulo{flex:1;min-width:0;text-align:center}
.radio-titulo b{display:block;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-titulo small{color:var(--tenue);font-size:12px}
.icono{width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:var(--panel);border:1px solid var(--linea);font-size:17px}
.icono.enviar{background:var(--ambar);border-color:var(--ambar);color:#25190A}
.aire-zona{padding:16px 16px 6px;text-align:center}
.aire-zona p{margin:8px 0 0;color:var(--tenue);font-size:14px}
.aire-zona.hablando p{color:var(--ambar);font-weight:600}
.aire-zona.yo p{color:var(--senal);font-weight:600}
.vu{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:42px}
.vu i{width:6px;height:6px;border-radius:3px;background:var(--linea)}
.aire-zona.hablando .vu i{background:var(--ambar);animation:vu .9s ease-in-out infinite}
.aire-zona.yo .vu i{background:var(--senal);animation:vu .7s ease-in-out infinite}
.vu i:nth-child(2){animation-delay:.08s}.vu i:nth-child(3){animation-delay:.16s}.vu i:nth-child(4){animation-delay:.24s}
.vu i:nth-child(5){animation-delay:.32s}.vu i:nth-child(6){animation-delay:.4s}.vu i:nth-child(7){animation-delay:.48s}
.vu i:nth-child(8){animation-delay:.56s}.vu i:nth-child(9){animation-delay:.64s}
@keyframes vu{0%,100%{height:8px}50%{height:38px}}
.peers{list-style:none;display:flex;gap:10px;overflow-x:auto;padding:10px 16px 12px;margin:0}
.peers li{flex:0 0 auto;text-align:center;width:64px}
.cara{width:52px;height:52px;border-radius:50%;margin:0 auto 5px;display:grid;place-items:center;font-size:19px;font-weight:600;
  background:#14212A;border:2px solid var(--linea);position:relative;font-family:"Barlow Condensed",Inter,system-ui,sans-serif}
.peers li.habla .cara{border-color:var(--ambar);box-shadow:0 0 0 4px #F2A33C33}
.peers li.mano .cara::after{content:"✋";position:absolute;right:-4px;top:-6px;font-size:15px}
.peers li.dueno .cara::before{content:"★";position:absolute;left:-3px;bottom:-4px;font-size:12px;color:var(--ambar)}
.peers span{display:block;font-size:11px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptt-zona{padding:6px 16px 14px;display:flex;flex-direction:column;align-items:center;gap:14px}
.ptt{position:relative;width:190px;height:190px;border-radius:50%;border:0;
  background:radial-gradient(circle at 50% 35%,#223644,#101B22 70%);box-shadow:inset 0 0 0 1px var(--linea),0 22px 40px -22px #000;
  color:var(--texto);touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .12s}
.ptt:active{transform:scale(.97)}
.ptt-cara{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;pointer-events:none}
.ptt b{font-family:"Barlow Condensed",Inter,system-ui,sans-serif;font-size:19px;font-weight:600;max-width:120px;line-height:1.1}
.ptt-anillo{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;pointer-events:none}
.ptt.activo{background:radial-gradient(circle at 50% 35%,#1F6B45,#0E2A1D 70%);color:#EAFFF3}
.ptt.activo .ptt-anillo{border-color:var(--senal);animation:pulso 1.4s ease-out infinite}
.ptt.activo .ptt-anillo.dos{animation-delay:.7s}
.ptt.ocupado{opacity:.55}
@keyframes pulso{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.ptt-acciones{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{padding:9px 14px;border-radius:999px;font-size:14px;background:var(--panel);border:1px solid var(--linea)}
.chip[aria-pressed="true"]{border-color:var(--ambar);color:var(--ambar);background:#231A0C}
.chip.peligro{border-color:#5A2626;color:#FF8A8A}
.chat{flex:1;display:flex;flex-direction:column;border-top:1px solid var(--linea);background:#0D151B;min-height:230px}
.chat-lista{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px;max-height:36vh}
.msg{max-width:82%;padding:9px 12px;border-radius:13px;background:var(--panel);border:1px solid var(--linea);font-size:15px;word-break:break-word;animation:entra .2s}
.msg b{display:block;font-size:12px;color:var(--ambar);font-weight:600}
.msg.mio{align-self:flex-end;background:#1B3327;border-color:#2C6B49}
.msg.sistema{align-self:center;background:none;border:0;color:var(--tenue);font-size:12.5px;padding:2px}
.msg.alerta{align-self:center;background:#3A1414;border-color:#7A2A2A;color:#FFD5D5;max-width:100%;text-align:center;font-weight:600}
.nota{display:flex;align-items:center;gap:8px;margin-top:4px}
.nota .play{width:30px;height:30px;border-radius:50%;background:var(--ambar);color:#25190A;border:0;font-size:12px}
.nota .onda-nota{display:flex;gap:2px;align-items:center;height:22px}
.nota .onda-nota i{width:3px;border-radius:2px;background:var(--tenue)}
.nota small{color:var(--tenue);font-size:12px}
.chat-barra{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--linea)}
.chat-barra input{flex:1;min-width:0;padding:11px 14px;border-radius:999px;background:#101A21;border:1px solid var(--linea)}
.grabando{margin:0;padding:0 14px 10px;color:var(--alerta);font-size:13px;text-align:center}
.flash{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:0;background:radial-gradient(circle,#FF000055,#FF000000 70%)}
.flash.on{animation:flash 1.5s ease-out 2}
@keyframes flash{0%,100%{opacity:0}30%{opacity:1}}

/* -------- modal -------- */
.modal{position:fixed;inset:0;background:#000000C4;display:grid;place-items:end center;z-index:80}
.modal-caja{width:100%;max-width:520px;background:var(--noche-2);border:1px solid var(--linea);border-radius:20px 20px 0 0;padding:20px 18px 26px;animation:sube .22s ease-out}
@keyframes sube{from{transform:translateY(30px);opacity:0}}
.modal h3{font-size:24px;margin-bottom:4px}
.copiar{display:flex;gap:8px;margin-top:12px}
.copiar input{flex:1;min-width:0;padding:12px;border-radius:12px;background:#0E171E;border:1px solid var(--linea);font-size:13px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--texto);color:var(--noche);padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;z-index:120;animation:entra .2s}

/* -------- mis grupos -------- */
.mio-tarjeta{border:1px solid var(--linea);border-radius:var(--r);background:linear-gradient(180deg,var(--panel),#121C24);padding:14px;margin-bottom:12px}
.mio-cabeza{display:flex;align-items:center;gap:12px}
.mio-datos{display:flex;gap:18px;margin:12px 0;padding:10px 12px;border-radius:10px;background:#0E171E;font-size:13px;color:var(--tenue)}
.mio-datos b{color:var(--texto);font-family:"Barlow Condensed",Inter,system-ui,sans-serif;font-size:20px;letter-spacing:.08em;display:block}
.mio-acciones{display:flex;gap:8px;flex-wrap:wrap}

/* -------- admin -------- */
.metricas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.metrica{padding:14px;border-radius:var(--r);border:1px solid var(--linea);background:var(--panel)}
.metrica b{display:block;font-size:30px;font-family:"Barlow Condensed",Inter,system-ui,sans-serif;line-height:1.1}
.metrica small{color:var(--tenue);font-size:12px}
.adm-fila{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--linea)}
.adm-fila .grupo-info{flex:1}
.adm-fila .mini{display:flex;gap:6px}
.adm-fila .mini button{padding:6px 10px;border-radius:9px;font-size:12px;background:var(--panel);border:1px solid var(--linea)}
.adm-fila .mini button.rojo{border-color:#5A2626;color:#FF8A8A}

/* -------- piezas del sistema real -------- */
body{min-height:100vh;background:radial-gradient(120% 60% at 50% -10%,#16242E 0%,transparent 60%),var(--noche)}
a{color:inherit;text-decoration:none}
.barra{position:sticky;top:0;z-index:30}
a.boton,a.btn-linea,a.btn-barra{display:inline-flex;align-items:center;justify-content:center}
.pie{padding:24px 16px 34px;text-align:center;color:var(--tenue);font-size:13px;border-top:1px solid var(--linea);margin-top:20px}
.pie a{color:var(--tenue)}.pie span{margin:0 7px;opacity:.5}.pie p{margin:8px 0 0;opacity:.7}
.vacio{text-align:center;padding:26px 16px;border:1px dashed var(--linea);border-radius:var(--r);color:var(--tenue)}
.vacio p{margin:0 0 14px}
.estado-con{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tenue)}
.estado-con i{width:7px;height:7px;border-radius:50%;background:#6b7c86}
.estado-con.ok i{background:var(--senal)}.estado-con.mal i{background:var(--alerta)}
.cargando{opacity:.6;pointer-events:none}
.aviso-caja{max-width:420px;margin:12vh auto 0;text-align:center}
.aviso-caja h1{font-size:34px;margin-bottom:8px}
.aviso-caja p{color:var(--tenue);margin:0 0 20px}
.instalar{display:flex;align-items:center;gap:12px;margin:0 0 22px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--linea);background:var(--panel)}
.instalar p{margin:0;flex:1;font-size:14px;color:var(--tenue)}
.instalar b{color:var(--texto)}
.peers li.conectando .cara{opacity:.55;border-style:dashed}
.peers li.sin-audio .cara{border-color:#7A2A2A}
.msg .hora{display:block;font-size:10.5px;color:var(--tenue);margin-top:2px;text-align:right}
.nota .play.sonando{background:var(--senal)}
.nota .barra-nota{flex:1;height:4px;border-radius:2px;background:var(--linea);min-width:90px;overflow:hidden}
.nota .barra-nota i{display:block;height:100%;width:0;background:var(--ambar)}
.ptt .cuenta{position:absolute;bottom:26px;left:0;right:0;font-size:12px;opacity:.8;z-index:2;pointer-events:none}
.aviso-mic{margin:0 16px 8px;padding:10px 12px;border-radius:12px;background:#3A1414;border:1px solid #7A2A2A;color:#FFD5D5;font-size:14px;text-align:center}
.tabla-adm .adm-fila form{display:inline}
.adm-fila .mini{flex-wrap:wrap;justify-content:flex-end}
.etiqueta{display:inline-block;font-size:11px;padding:2px 7px;border-radius:6px;background:#0E171E;border:1px solid var(--linea);color:var(--tenue);margin-left:4px}
.etiqueta.roja{color:#FF8A8A;border-color:#5A2626}
.ok-guardado{padding:10px 12px;border-radius:12px;background:#123024;border:1px solid #2C6B49;margin-bottom:14px;font-size:14px}
.alerta-caja{padding:10px 12px;border-radius:12px;background:#3A1414;border:1px solid #7A2A2A;margin-bottom:14px;font-size:14px;color:#FFD5D5}
:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
@media (min-width:620px){.dial-titulo{font-size:54px}.ptt{width:215px;height:215px}}