/* Ajustes para todos los diseños (Original, A, B, C):
   letra más fina, ventanas (modales) compactas y contador de oyentes. */

/* ── Letra más fina ── */
html[data-modo] :is(h1,h2,h3,h4,h5,h6,b,strong,th){font-weight:500}
html[data-modo] :is([style*="font-weight: 800"],[style*="font-weight:800"],[style*="font-weight: 900"],[style*="font-weight:900"],[style*="font-weight: 700"],[style*="font-weight:700"],[style*="font-weight: bold"],[style*="font-weight:bold"],[style*="font-weight: 600"],[style*="font-weight:600"]){font-weight:500!important}
html[data-modo] :is(.radio-title span,.canal-title span,.coreui-nav-link,.btn-section,.btn,.list-group-item a,.badge){font-weight:500!important}
html[data-modo] body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ── Ventanas compactas ── */
html[data-modo] .modal.fade .modal-dialog{transform:translateY(14px) scale(.97)!important;opacity:0;transition:transform .22s cubic-bezier(.2,.8,.3,1),opacity .18s ease!important}
html[data-modo] .modal.show .modal-dialog{transform:none!important;opacity:1}
html[data-modo] .modal-backdrop.show{backdrop-filter:blur(2px)}
html[data-modo] .modal .modal-dialog:is(.modal-xl,.modal-lg,[style*="max-width"]){max-width:min(620px,calc(100vw - 24px))!important;width:auto!important;margin:1.75rem auto!important;height:auto!important}
html[data-modo] .modal .modal-dialog:not(#modalChatWhatsapp *){display:flex;align-items:center;min-height:calc(100% - 3.5rem)}
html[data-modo] .modal .modal-dialog > .modal-content{width:100%}
html[data-modo] .modal .modal-dialog .modal-body img{max-width:100%!important;height:auto!important}
/* chat: más ancho y ordenado */
html[data-modo] #modalChatWhatsapp .modal-dialog{max-width:min(900px,calc(100vw - 24px))!important;width:100%!important;height:min(640px,86vh)!important;margin:max(2vh,12px) auto!important}
html[data-modo] #modalChatWhatsapp .modal-content > div:first-child{padding:12px 18px!important}
html[data-modo] #modalChatWhatsapp .modal-content > div:first-child h5{font-size:16px!important;font-weight:500!important;gap:10px!important}
html[data-modo] #modalChatWhatsapp .modal-content > div:first-child [data-bs-dismiss]{width:32px!important;height:32px!important}
html[data-modo] #chatSidebarContainer{width:290px!important;flex:0 0 290px}
html[data-modo] #chatSidebarContainer > div:first-child{padding:12px!important}
html[data-modo] #chatListContainer :is(b,strong,[style*="font-weight"]){font-weight:500!important}
html[data-modo] #chatHeaderConversacion{padding:10px 16px!important}
html[data-modo] #chatMessagesConversacion{padding:16px!important}
@media (max-width:768px){html[data-modo] #modalChatWhatsapp .modal-dialog{max-width:100%!important;height:100vh!important;margin:0!important}html[data-modo] #modalChatWhatsapp .modal-content{border-radius:0!important}html[data-modo] #chatSidebarContainer{width:100%!important;flex:1 1 auto}}
html[data-modo] .modal .modal-dialog .modal-content{border-radius:16px!important;box-shadow:0 18px 50px rgba(15,23,42,.28)!important;overflow:hidden}
html[data-modo] .modal .modal-dialog .modal-header{padding:13px 52px 13px 20px!important;border-radius:0!important;min-height:0}
html[data-modo] .modal .modal-dialog .modal-title{font-size:14.5px!important;font-weight:500!important;letter-spacing:0!important;line-height:1.3!important}
html[data-modo] .modal .modal-dialog .modal-body{padding:18px 20px!important;max-height:min(68vh,620px)!important;font-size:13.5px;line-height:1.6}
html[data-modo] .modal .modal-dialog .modal-body :is(h1,h2){font-size:19px!important;font-weight:500!important;letter-spacing:-.01em!important;margin:0 0 12px!important;line-height:1.25!important}
html[data-modo] .modal .modal-dialog .modal-body :is(h3,h4){font-size:14px!important;font-weight:500!important;margin:0 0 6px!important}
html[data-modo] .modal .modal-dialog .modal-body :is(h5,h6){font-size:13px!important;font-weight:500!important}
html[data-modo] .modal .modal-dialog .modal-body :is(p,li,label,td){font-size:13.5px!important;line-height:1.6!important;font-weight:400}
html[data-modo] .modal .modal-dialog .modal-body small{font-size:12px!important}
html[data-modo] .modal .modal-dialog .modal-body [style*="padding"]:not(.btn):not(button):not(input):not(textarea):not(select):not(a){padding:12px 14px!important}
html[data-modo] .modal .modal-dialog .modal-body [style*="margin-bottom: 30px"],html[data-modo] .modal .modal-dialog .modal-body [style*="margin-bottom: 28px"],html[data-modo] .modal .modal-dialog .modal-body [style*="margin-bottom: 25px"]{margin-bottom:12px!important}
html[data-modo] .modal .modal-dialog .modal-body [style*="padding"] > p:last-child{margin-bottom:0!important}
html[data-modo] .modal .modal-dialog .modal-body [style*="border-left"]{border-left-width:3px!important;border-radius:10px!important}
html[data-modo] .modal .modal-dialog .modal-body [style*="box-shadow"]{box-shadow:0 1px 3px rgba(15,23,42,.08)!important}
html[data-modo] .modal .modal-dialog .modal-body .row{--bs-gutter-x:12px;--bs-gutter-y:12px}
html[data-modo] .modal .modal-dialog .modal-body .row.mb-4{margin-bottom:0!important}
html[data-modo] .modal .modal-dialog .modal-body :is(input,textarea,select){font-size:13.5px!important;padding:8px 11px!important;border-radius:9px!important}
html[data-modo] .modal .modal-dialog .modal-body :is(img,svg,i).fa,html[data-modo] .modal .modal-dialog .modal-body i[class*="fa-"]{font-size:inherit}
html[data-modo] .modal .modal-dialog .modal-body .btn,html[data-modo] .modal .modal-dialog .modal-body button:not([data-bs-dismiss]){font-size:13px!important;padding:7px 16px!important;border-radius:9px!important}
html[data-modo] .modal .modal-dialog .modal-footer{padding:10px 16px!important;border-radius:0!important}
html[data-modo] .modal .modal-dialog .modal-footer .btn{font-size:13px!important;font-weight:500!important;padding:7px 20px!important;border-radius:9px!important;box-shadow:none!important;text-transform:none!important;letter-spacing:0!important}
html[data-modo] .modal .modal-dialog [data-bs-dismiss][style*="position: absolute"]{top:9px!important;right:12px!important;width:30px!important;height:30px!important;background:rgba(255,255,255,.9)!important;border:1px solid rgba(15,23,42,.1)!important}
html[data-modo] .modal .modal-dialog [data-bs-dismiss][style*="position: absolute"] i{font-size:13px!important}
@media (max-width:576px){
  html[data-modo] .modal .modal-dialog:is(.modal-xl,.modal-lg,[style*="max-width"]){margin:.75rem auto!important}
  html[data-modo] .modal .modal-dialog .modal-body{padding:14px 14px!important;max-height:74vh!important}
}
/* ventana "Agregar radio / canal TV" un poco más angosta */
html[data-modo] .zs-add-modal{width:620px!important;height:min(760px,calc(100vh - 30px))!important}
@media (max-width:640px){html[data-modo] .zs-add-modal{width:100vw!important;height:100vh!important}}

/* ── Personas escuchando ── */
.zs-oy{position:absolute;left:8px;bottom:8px;z-index:4;display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 6px;border-radius:20px;background:rgba(10,14,28,.62);color:#fff;font-size:10.5px;line-height:16px;font-weight:500;letter-spacing:.01em;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.zs-oy b{font-weight:600!important;color:#fff!important}
.zs-oy svg{opacity:.9}
html.dz-c .zs-oy{bottom:auto;top:36px;left:10px}
.radio-card.zs-sonando .zs-oy{background:rgba(22,163,74,.85)}
.dz-feat-oy{display:flex;align-items:center;gap:5px;font-style:normal;font-size:11.5px;color:#16a34a;margin-top:5px;font-weight:500}
.dz-feat-oy:empty{display:none}
html.dz-b .dz-feat.on .dz-feat-lbl{color:#16a34a}
:is(.dz-now-it,.dz-rk).on{outline:2px solid rgba(34,197,94,.55);outline-offset:-2px}

/* ── Encabezado del diseño Original: más limpio y con letra fina ── */
@font-face{font-family:'ZS Inter';src:url(fonts/inter-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'ZS Inter';src:url(fonts/inter-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
html:not(.dz) .coreui-header :is(.coreui-nav-link,.coreui-search-input,.coreui-btn-add,.coreui-btn-canal){font-family:'ZS Inter',system-ui,-apple-system,'Segoe UI',sans-serif!important;letter-spacing:0}
html:not(.dz) .coreui-main-header{padding:10px 0!important;box-shadow:0 4px 18px rgba(15,23,42,.12)!important}
html:not(.dz) .coreui-logo-box{padding:5px 14px!important;border-radius:12px!important;background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.22);box-shadow:none!important}
html:not(.dz) .coreui-nav-inline{gap:2px!important}
html:not(.dz) .coreui-nav-link{font-size:14px!important;font-weight:400!important;padding:7px 12px!important;border-radius:999px;border:0!important;opacity:.92;transition:background .15s,opacity .15s!important}
html:not(.dz) .coreui-nav-link:hover{background:rgba(255,255,255,.16);opacity:1;padding:7px 12px!important;border:0!important}
@media (min-width:992px){
  html:not(.dz) .coreui-search-form{max-width:380px!important;gap:8px!important}
  html:not(.dz) .coreui-search-wrapper{min-width:200px!important}
  html:not(.dz) .coreui-search-input{height:40px!important;font-size:14px!important;font-weight:400!important;padding:0 14px 0 38px!important;border-radius:999px!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.35)!important;background:rgba(255,255,255,.96)!important}
  html:not(.dz) .coreui-search-icon{left:14px!important;font-size:14px!important}
  html:not(.dz) .coreui-buttons-group{gap:6px!important}
  html:not(.dz) :is(.coreui-btn-add,.coreui-btn-canal){height:40px!important;padding:0 16px!important;font-size:14px!important;font-weight:500!important;border:1px solid rgba(255,255,255,.5)!important;background:rgba(255,255,255,.12)!important;box-shadow:none!important;border-radius:999px!important;color:#fff!important;transform:none!important}
  html:not(.dz) :is(.coreui-btn-add,.coreui-btn-canal):hover{background:rgba(255,255,255,.22)!important}
  html:not(.dz) :is(.coreui-btn-add,.coreui-btn-canal) i{display:inline-flex!important;align-items:center;width:auto!important;min-width:16px;font-size:15px!important;flex-shrink:0}
  html:not(.dz) :is(.coreui-btn-add,.coreui-btn-canal) i svg{height:1em;min-width:1em}
}
html:not(.dz) .zs-modo-btn{margin-left:6px}