/* Cabina · Locutor IA — diseño aprobado el 23-sep-2026 (docs/DISENO-CABINA-2026-09-23.html). */
:root{
  --fondo:#0F1216; --panel:#171B21; --panel-2:#1E232A; --linea:#2A3038; --tinta:#ECEEF0; --tinta-2:#98A0A8;
  --azul:#5B7CFF; --ambar:#F0A24A; --verde:#3FD39A; --rojo:#FF5A4E; --wa:#25D366;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --sans:"Public Sans",system-ui,sans-serif; --disp:"Archivo","Public Sans",sans-serif;
}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--fondo);color:var(--tinta);font:15px/1.45 var(--sans)}
.cabina{max-width:1400px;margin:0 auto;padding:14px 24px 24px;display:grid;grid-template-rows:auto 1fr auto;gap:12px;min-height:100vh}
.barra{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:22px;background:var(--panel);border:1px solid var(--linea);padding:10px 18px}
.reloj{font-family:var(--mono);font-size:2rem;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.reloj small{font-size:.8rem;color:var(--tinta-2);font-weight:400;margin-left:8px;letter-spacing:.1em;text-transform:uppercase}
.emisora{font-family:var(--disp);font-variation-settings:"wdth" 112;font-weight:800;font-size:1.15rem}
.emisora .sub{display:block;font:500 .72rem var(--mono);color:var(--tinta-2);letter-spacing:.12em;text-transform:uppercase}
.vu{display:flex;gap:3px;align-items:flex-end;height:28px}
.vu i{width:6px;background:var(--verde);display:block;height:var(--h,20%);transition:height .12s linear} .vu i:nth-child(n+9){background:var(--ambar)} .vu i:nth-child(n+12){background:var(--rojo)}
.aire{font:700 .8rem var(--mono);letter-spacing:.18em;color:#fff;background:var(--rojo);padding:8px 14px;display:flex;align-items:center;gap:8px}
.aire::before{content:"";width:9px;height:9px;border-radius:50%;background:#fff;animation:p 1.2s infinite}
.aire.off{background:var(--panel-2);color:var(--tinta-2)} .aire.off::before{animation:none;background:var(--tinta-2)}
@keyframes p{50%{opacity:.25}}
.grid{display:grid;grid-template-columns:35fr 38fr 27fr;gap:12px;min-height:640px}
.col{background:var(--panel);border:1px solid var(--linea);display:flex;flex-direction:column;min-width:0}
.cab{font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);padding:12px 16px;border-bottom:1px solid var(--linea);display:flex;justify-content:space-between;gap:10px}
/* LOCUTOR (35 %) */
.locutor{padding:18px;display:flex;flex-direction:column;gap:14px;flex:1}
.avatar{position:relative;aspect-ratio:1/1;margin:0 auto;width:100%;max-width:280px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2b3a7a,#121722 70%);border:2px solid var(--azul);display:grid;place-items:center;isolation:isolate}
.avatar canvas{width:100%;height:100%;border-radius:50%;display:block;position:relative;z-index:2}
.avatar .halo{position:absolute;inset:-8%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(91,124,255,.42) 0%,rgba(91,124,255,.22) 38%,rgba(63,211,154,.12) 62%,transparent 76%);filter:blur(20px);animation:respira 4.6s ease-in-out infinite;opacity:.6;transition:opacity .5s}
.avatar .aro{position:absolute;inset:-7%;border-radius:50%;pointer-events:none;border:1px solid rgba(91,124,255,.32);border-top-color:rgba(63,211,154,.6);animation:gira 16s linear infinite;opacity:.5;transition:opacity .5s}
.avatar .aro.inv{inset:-1%;border-color:rgba(63,211,154,.18);border-bottom-color:rgba(91,124,255,.55);animation:giraInv 22s linear infinite}
.avatar.hablando .halo{opacity:1;animation-duration:2.4s} .avatar.hablando .aro{opacity:1;animation-duration:6s}
@keyframes respira{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.07);opacity:1}}
@keyframes gira{from{rotate:0deg}to{rotate:360deg}} @keyframes giraInv{from{rotate:0deg}to{rotate:-360deg}}
.nombre{text-align:center}
.nombre b{font-family:var(--disp);font-variation-settings:"wdth" 112;font-size:1.6rem;font-weight:800;display:block}
.nombre span{color:var(--tinta-2);font-size:.9rem}
.guion{background:var(--panel-2);border-left:3px solid var(--azul);padding:12px 14px;font-size:1.02rem;line-height:1.5;min-height:92px}
.guion small{display:block;font:500 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:6px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto}
.kpi{background:var(--panel-2);padding:10px;text-align:center}
.kpi b{display:block;font-family:var(--mono);font-size:1.25rem;font-variant-numeric:tabular-nums}
.kpi span{font-size:.7rem;color:var(--tinta-2);text-transform:uppercase;letter-spacing:.1em}
/* PLAYOUT (38 %) */
.ahora{padding:16px;display:grid;grid-template-columns:96px 1fr;gap:14px;border-bottom:1px solid var(--linea);background:linear-gradient(90deg,#1c2a52 0%,var(--panel) 70%)}
.disco{width:96px;height:96px;border-radius:50%;background:conic-gradient(#333 0 25%,#222 0 50%,#333 0 75%,#222 0);border:4px solid #0a0c10;display:grid;place-items:center;animation:g 4s linear infinite}
.disco.quieto{animation-play-state:paused}
.disco::after{content:"";width:22px;height:22px;border-radius:50%;background:var(--ambar)}
@keyframes g{to{transform:rotate(360deg)}}
.ahora .t{font-family:var(--disp);font-variation-settings:"wdth" 112;font-size:1.5rem;font-weight:800;line-height:1.1}
.ahora .a{color:var(--tinta-2)} .tiempo{font-family:var(--mono);font-size:1.7rem;font-variant-numeric:tabular-nums;margin-top:6px}
.tiempo small{font-size:.9rem;color:var(--tinta-2)}
.barra-t{height:6px;background:var(--linea);margin-top:8px}.barra-t i{display:block;height:100%;width:0;background:var(--ambar);transition:width 1s linear}
.cola{flex:1;overflow:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem}
td,th{padding:9px 14px;border-bottom:1px solid var(--linea);text-align:left;white-space:nowrap}
th{font:500 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2)}
td.n{font-family:var(--mono);color:var(--tinta-2);width:34px} td.d{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
td.titulo{white-space:normal}
.tipo{font:600 .66rem var(--mono);letter-spacing:.1em;padding:2px 7px;border-radius:2px}
.tipo.v{background:#22305e;color:#9fb3ff}.tipo.c{background:#173d31;color:var(--verde)}.tipo.p{background:#4a2e12;color:var(--ambar)}.tipo.h{background:#2a2f35;color:var(--tinta-2)}
tr.ded td{border-bottom:0;padding-top:0;color:var(--tinta-2);font-size:.82rem;white-space:normal}
tr.vacio td{color:var(--tinta-2);text-align:center;padding:30px}
/* WHATSAPP (27 %) */
.chat{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.msg{background:var(--panel-2);border-radius:10px 10px 10px 2px;padding:10px 12px;font-size:.92rem;border-left:3px solid var(--wa);animation:entra .6s cubic-bezier(.16,1,.3,1)}
.msg.nuevo{box-shadow:0 0 0 1px rgba(37,211,102,.5)}
@keyframes entra{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.msg .de{font:500 .7rem var(--mono);color:var(--tinta-2);display:flex;justify-content:space-between;margin-bottom:4px}
.msg .est{margin-top:6px;font:600 .66rem var(--mono);letter-spacing:.1em}
.est.ok{color:var(--verde)}.est.wait{color:var(--ambar)}.est.no{color:var(--tinta-2)}.est.onair{color:var(--rojo)}
.chat .vacio{color:var(--tinta-2);text-align:center;padding:30px 10px;font-size:.9rem}
.pie-wa{padding:12px 16px;border-top:1px solid var(--linea);font-size:.85rem;color:var(--tinta-2);display:flex;justify-content:space-between;align-items:center;gap:10px}
.pie-wa b{color:var(--wa);font-family:var(--mono)}
.tira{background:var(--panel);border:1px solid var(--linea);padding:10px 18px;display:flex;gap:26px;font:500 .78rem var(--mono);color:var(--tinta-2);letter-spacing:.06em;overflow-x:auto}
.tira b{color:var(--tinta)}
@media (max-width:1000px){.grid{grid-template-columns:1fr}.barra{grid-template-columns:1fr 1fr}.reloj{font-size:1.5rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* botón de escucha (la cabina también sirve de monitor) */
.escuchar{display:inline-flex;align-items:center;gap:8px;font:700 .8rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta);background:var(--panel-2);border:1px solid var(--linea);padding:8px 14px;cursor:pointer;border-radius:3px}
.escuchar:hover{border-color:var(--tinta-2)} .escuchar.on{border-color:var(--verde);color:var(--verde)}
.escuchar:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
@media (max-width:1000px){.barra{grid-template-columns:1fr 1fr}}