/* La Pipol Broadcast Player v4.0.6 Production Compact
   Corrección: ancho completo, alto reducido ~1 cm y VU estéreo real. */

.cover-module,
.analyzer-module,
.pipol-rights-bar,
[data-module="cover"],
[data-module="analyzer"],
[data-module="rights"]{display:none!important;}

/* El rack ocupa todo el ancho disponible de la página. */
.pipol-player-shell.is-bottom{
  left:0!important;
  right:0!important;
  padding:4px 0!important;
}
.pipol-rack{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  box-sizing:border-box!important;
  grid-template-columns:
    118px
    minmax(275px,1fr)
    190px
    252px
    88px
    138px
    68px
    92px!important;
  gap:5px!important;
  min-height:128px!important;
  padding:6px!important;
  border-radius:12px!important;
}
.rack-module{
  min-height:116px!important;
  height:116px!important;
  padding:9px 7px 6px!important;
  box-sizing:border-box!important;
}
.module-title{top:5px!important;font-size:10px!important;}

/* Logo compacto para acompañar la reducción vertical. */
.logo-plate{width:92px!important;height:88px!important;}
.brand-logo{max-width:84px!important;max-height:62px!important;}

/* Display compacto sin perder legibilidad. */
.display-module{padding:7px!important;}
.crt-display{height:100%!important;min-height:0!important;padding:8px 12px 7px!important;}
.display-topline{margin-bottom:2px!important;}
.artist-label,.title-label{font-size:8px!important;line-height:9px!important;}
.artist-line,.song-marquee{height:22px!important;line-height:22px!important;}
.artist-line span,.song-marquee span{font-size:15px!important;}
.display-footer{bottom:6px!important;}
.lcd-bars{bottom:6px!important;height:15px!important;}

/* Controles más bajos, conservando proporción y tactilidad. */
.controls-module{padding:8px 6px 5px!important;}
.transport-grid{height:88px!important;gap:5px!important;margin-top:12px!important;}
.controls-module .metal-button{height:86px!important;min-height:86px!important;}
.controls-module .metal-button .button-face{height:34px!important;top:25px!important;}
.controls-module .metal-button small{top:6px!important;font-size:8px!important;}
.controls-module .metal-button .play{width:22px!important;height:23px!important;top:31px!important;}
.controls-module .metal-button .stop{width:18px!important;height:18px!important;top:34px!important;}
.controls-module .metal-button .pause{width:23px!important;height:23px!important;top:31px!important;}
.controls-module .metal-button .pause::before,
.controls-module .metal-button .pause::after{width:6px!important;height:23px!important;}
.controls-module .metal-button .speaker{width:23px!important;height:21px!important;top:33px!important;}
.controls-module .metal-button .led{bottom:5px!important;width:9px!important;height:9px!important;}

/* PLUS con mayor protagonismo. */
.plus-module.feature-module{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:20px repeat(2,1fr)!important;
  gap:5px!important;
  padding:7px 6px 5px!important;
  border-color:rgba(255,133,0,.62)!important;
  box-shadow:inset 0 0 0 1px #050505,inset 0 15px 20px rgba(255,255,255,.04),0 2px 8px rgba(0,0,0,.65),0 0 16px rgba(255,133,0,.20)!important;
}
.plus-module .module-title{grid-column:1/-1!important;margin:0!important;line-height:18px!important;color:#ffb13d!important;}
.plus-module .feature-btn{width:100%!important;min-height:29px!important;height:29px!important;margin:0!important;font-size:8px!important;border-radius:6px!important;}

/* SOCIAL restaurado y compacto. */
.social-module{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:18px repeat(3,1fr)!important;
  align-items:center!important;
  justify-items:center!important;
  gap:3px!important;
  padding:7px 4px 5px!important;
}
.social-module a{width:30px!important;height:24px!important;}

/* STATUS y volumen compactos. */
.status-list{gap:5px!important;margin-top:11px!important;font-size:9px!important;}
.status-dot{width:7px!important;height:7px!important;}
.knob-wrap{height:88px!important;padding-top:3px!important;}
.knob-hit-area{width:92px!important;height:92px!important;top:-2px!important;}
.potentiometer{width:58px!important;height:58px!important;margin-top:11px!important;}
.pot-scale,.knob-wrap::before{top:0!important;width:86px!important;height:86px!important;}
.volume-value{font-size:10px!important;bottom:0!important;}

/* VU: plumas grandes, visibles y con espacio útil mayor. */
.vu-module{padding:7px 6px 5px!important;}
.vu-wrap{height:91px!important;gap:6px!important;padding-top:0!important;margin-top:11px!important;}
.vu-meter{height:90px!important;padding:3px 3px 2px!important;}
.vu-meter canvas{height:69px!important;width:100%!important;}
.vu-meter b{height:15px!important;line-height:15px!important;font-size:9px!important;margin-top:1px!important;}
.vu-meter::after{height:14px!important;}

/* Sin barra de derechos ni espacio residual. */
.pipol-player-shell{padding-bottom:4px!important;}

@media (max-width:1280px) and (min-width:1101px){
  .pipol-rack{
    grid-template-columns:106px minmax(235px,1fr) 178px 224px 80px 122px 60px 82px!important;
  }
}

@media (max-width:1100px) and (min-width:768px){
  .pipol-player-shell.is-bottom{padding:6px!important;}
  .pipol-rack{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:116px minmax(260px,1fr) 198px 220px!important;
    min-height:166px!important;
    padding:8px!important;
  }
  .rack-module{min-height:150px!important;height:auto!important;padding:12px 8px 8px!important;}
  .vu-module{grid-column:span 2!important;}
  .plus-module,.social-module,.status-module,.volume-module{grid-column:auto!important;}
  .vu-wrap{height:120px!important;margin-top:0!important;}
  .vu-meter{height:118px!important;}
  .vu-meter canvas{height:91px!important;}
}

@media (max-width:767px){
  .pipol-player-shell.is-bottom{padding:0!important;}
  .pipol-rack{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:minmax(0,1fr) 132px!important;
    min-height:88px!important;
    padding:5px!important;
  }
  .rack-module{height:auto!important;min-height:auto!important;}
  .plus-module,.social-module,.vu-module,.status-module,.logo-module{display:none!important;}
}

/* =========================================================
   v4.0.7 – Ajuste de proporciones desktop y vista smartphone
   - Display 1 cm menos ancho
   - Controles 1 cm más anchos y elevados
   - Pestaña Ocultar más pequeña
   - Smartphone: solo Display + Controles + PLUS
   ========================================================= */

@media (min-width:1101px){
  .pipol-rack{
    grid-template-columns:
      118px
      minmax(237px,1fr)
      228px
      252px
      88px
      138px
      68px
      92px!important;
  }

  .controls-module{
    padding:6px 6px 5px!important;
  }
  .controls-module .module-title{
    height:19px!important;
    line-height:19px!important;
    margin:0 0 3px!important;
    font-size:9px!important;
  }
  .transport-grid{
    height:88px!important;
    margin-top:0!important;
    padding-top:0!important;
    gap:6px!important;
    align-items:start!important;
  }
  .controls-module .metal-button{
    height:84px!important;
    min-height:84px!important;
  }
  .controls-module .metal-button small{
    top:4px!important;
    height:16px!important;
    line-height:16px!important;
    font-size:8px!important;
  }
  .controls-module .metal-button::before{
    top:20px!important;
    height:40px!important;
  }
  .controls-module .metal-button::after{
    top:22px!important;
    height:12px!important;
  }
  .controls-module .metal-button .icon{
    top:29px!important;
  }
  .controls-module .metal-button .play{width:21px!important;height:22px!important;}
  .controls-module .metal-button .stop{width:17px!important;height:17px!important;top:31px!important;}
  .controls-module .metal-button .pause{width:21px!important;height:22px!important;top:29px!important;}
  .controls-module .metal-button .pause::before,
  .controls-module .metal-button .pause::after{width:5px!important;height:22px!important;}
  .controls-module .metal-button .speaker{width:22px!important;height:20px!important;top:30px!important;}
  .controls-module .metal-button .led{bottom:5px!important;width:8px!important;height:8px!important;}

  .player-hide-tab{
    right:2px!important;
    height:58px!important;
    min-width:22px!important;
    padding:5px 2px!important;
    font-size:8px!important;
    letter-spacing:.04em!important;
    border-radius:7px 0 0 7px!important;
  }
}

@media (max-width:767px){
  .pipol-player-shell.is-bottom{
    height:258px!important;
    padding:3px!important;
    background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.96))!important;
  }
  .pipol-rack{
    width:100%!important;
    max-width:none!important;
    height:252px!important;
    min-height:252px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:82px 86px 68px!important;
    gap:4px!important;
    padding:5px!important;
    overflow:hidden!important;
    border-radius:12px!important;
  }
  .logo-module,.vu-module,.status-module,.social-module,.volume-module,
  .cover-module,.analyzer-module,.pipol-rights-bar{
    display:none!important;
  }
  .display-module,.controls-module,.plus-module{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    grid-column:1!important;
    margin:0!important;
    overflow:hidden!important;
  }
  .display-module{grid-row:1!important;padding:4px!important;}
  .crt-display{
    height:72px!important;
    min-height:72px!important;
    padding:6px 9px!important;
  }
  .display-topline{font-size:8px!important;margin-bottom:1px!important;}
  .display-topline strong{font-size:8px!important;}
  .artist-label,.title-label,.display-footer{display:none!important;}
  .artist-line,.song-marquee{
    max-width:calc(100% - 54px)!important;
    height:19px!important;
    min-height:19px!important;
    line-height:19px!important;
    margin-top:2px!important;
  }
  .artist-line span{font-size:12px!important;}
  .song-marquee span{font-size:13px!important;}
  .lcd-bars{display:flex!important;right:8px!important;bottom:7px!important;height:24px!important;gap:2px!important;}
  .lcd-bars i{width:4px!important;}

  .controls-module{grid-row:2!important;padding:3px 4px!important;}
  .controls-module .module-title{display:none!important;}
  .transport-grid{
    height:78px!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
    margin:0!important;
    padding:0!important;
    align-items:start!important;
  }
  .controls-module .metal-button{
    height:76px!important;
    min-height:76px!important;
    border-radius:6px!important;
  }
  .controls-module .metal-button small{
    top:3px!important;
    font-size:7px!important;
    height:14px!important;
    line-height:14px!important;
  }
  .controls-module .metal-button::before{top:18px!important;height:36px!important;left:5px!important;right:5px!important;}
  .controls-module .metal-button::after{top:19px!important;left:7px!important;right:7px!important;height:10px!important;}
  .controls-module .metal-button .icon{top:26px!important;}
  .controls-module .metal-button .play{width:19px!important;height:20px!important;}
  .controls-module .metal-button .stop{width:15px!important;height:15px!important;top:28px!important;}
  .controls-module .metal-button .pause{width:19px!important;height:20px!important;top:26px!important;}
  .controls-module .metal-button .pause::before,
  .controls-module .metal-button .pause::after{width:5px!important;height:20px!important;}
  .controls-module .metal-button .speaker{width:20px!important;height:18px!important;top:27px!important;}
  .controls-module .metal-button .led{bottom:4px!important;width:7px!important;height:7px!important;}

  .plus-module.feature-module{
    grid-row:3!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:16px 42px!important;
    gap:3px!important;
    padding:3px 4px!important;
  }
  .plus-module .module-title{
    display:block!important;
    grid-column:1/-1!important;
    height:15px!important;
    line-height:15px!important;
    margin:0!important;
    font-size:8px!important;
  }
  .plus-module .feature-btn{
    display:block!important;
    width:100%!important;
    height:40px!important;
    min-height:40px!important;
    margin:0!important;
    font-size:8px!important;
    border-radius:6px!important;
  }

  .player-hide-tab{
    right:3px!important;
    top:4px!important;
    transform:none!important;
    writing-mode:horizontal-tb!important;
    height:20px!important;
    min-width:46px!important;
    padding:3px 5px!important;
    font-size:7px!important;
    border-radius:0 0 6px 6px!important;
  }
  .pipol-player-shell.is-hidden{height:36px!important;}
  .pipol-player-shell.is-hidden .player-hide-tab{top:4px!important;right:6px!important;height:26px!important;min-width:68px!important;}
}


/* v4.1 Final Production: etiqueta COMPARTIR en PLUS */
#shareBtn{
  font-size:7px!important;
  letter-spacing:.15px!important;
  white-space:nowrap!important;
  padding-left:2px!important;
  padding-right:2px!important;
}