/* La Pipol Broadcast Player v4.1 Final Production Rev.1
   Ajustes: display -1 cm, controles más amplios, COMPARTIR centrado,
   YouTube oficial y móvil en dos bloques. */

/* DESKTOP: se transfieren ~38 px del display a controles. */
@media (min-width:1101px){
  .pipol-rack{
    grid-template-columns:
      118px
      minmax(199px,1fr)
      266px
      252px
      88px
      138px
      68px
      92px!important;
  }

  .controls-module .transport-grid{
    gap:7px!important;
  }
}

/* COMPARTIR centrado en todas las vistas. */
#shareBtn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1.05!important;
  padding-left:3px!important;
  padding-right:3px!important;
  box-sizing:border-box!important;
}

/* SMARTPHONE: solo dos bloques visuales.
   1) Display en todo el ancho.
   2) Controles + PLUS en una misma fila. */
@media (max-width:767px){
  .pipol-player-shell.is-bottom{
    height:214px!important;
    min-height:214px!important;
    padding:3px!important;
  }

  .pipol-rack{
    width:100%!important;
    max-width:none!important;
    height:208px!important;
    min-height:208px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.38fr) minmax(0,1fr)!important;
    grid-template-rows:82px 118px!important;
    gap:4px!important;
    padding:4px!important;
    overflow:hidden!important;
  }

  .logo-module,.vu-module,.status-module,.social-module,.volume-module,
  .cover-module,.analyzer-module,.pipol-rights-bar{
    display:none!important;
  }

  .display-module{
    display:block!important;
    grid-column:1 / -1!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    height:82px!important;
    min-height:82px!important;
    padding:4px!important;
    overflow:hidden!important;
  }

  .crt-display{
    height:72px!important;
    min-height:72px!important;
  }

  .controls-module{
    display:block!important;
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    min-width:0!important;
    height:118px!important;
    min-height:118px!important;
    padding:4px!important;
    overflow:hidden!important;
  }

  .controls-module .module-title{
    display:block!important;
    height:16px!important;
    line-height:16px!important;
    margin:0 0 2px!important;
    font-size:8px!important;
  }

  .transport-grid{
    height:92px!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,44px)!important;
    gap:3px!important;
    margin:0!important;
    padding:0!important;
    align-items:stretch!important;
  }

  .controls-module .metal-button{
    height:44px!important;
    min-height:44px!important;
    border-radius:5px!important;
  }

  .controls-module .metal-button small{
    top:1px!important;
    height:11px!important;
    line-height:11px!important;
    font-size:6px!important;
  }

  .controls-module .metal-button::before{
    top:12px!important;
    height:22px!important;
    left:5px!important;
    right:5px!important;
  }
  .controls-module .metal-button::after{
    top:13px!important;
    height:7px!important;
    left:7px!important;
    right:7px!important;
  }
  .controls-module .metal-button .icon{top:17px!important;transform:scale(.68)!important;transform-origin:center!important;}
  .controls-module .metal-button .stop{top:18px!important;}
  .controls-module .metal-button .speaker{top:17px!important;}
  .controls-module .metal-button .led{bottom:2px!important;width:6px!important;height:6px!important;}

  .plus-module.feature-module{
    display:grid!important;
    grid-column:2!important;
    grid-row:2!important;
    width:100%!important;
    min-width:0!important;
    height:118px!important;
    min-height:118px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:16px repeat(2,46px)!important;
    gap:3px!important;
    padding:4px!important;
    overflow:hidden!important;
  }

  .plus-module .module-title{
    display:block!important;
    grid-column:1/-1!important;
    height:16px!important;
    line-height:16px!important;
    margin:0!important;
    font-size:8px!important;
  }

  .plus-module .feature-btn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    width:100%!important;
    height:46px!important;
    min-height:46px!important;
    margin:0!important;
    padding:2px!important;
    font-size:7px!important;
    line-height:1.05!important;
    border-radius:5px!important;
    overflow:hidden!important;
  }

  #shareBtn{
    font-size:6.5px!important;
    letter-spacing:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  .player-hide-tab{
    right:3px!important;
    top:3px!important;
    height:18px!important;
    min-width:42px!important;
    padding:2px 4px!important;
    font-size:6.5px!important;
  }

  .pipol-player-shell.is-hidden{height:36px!important;min-height:36px!important;}
}

@media (max-width:380px){
  .pipol-rack{grid-template-columns:minmax(0,1.42fr) minmax(0,.92fr)!important;}
  .plus-module .feature-btn{font-size:6.5px!important;}
  #shareBtn{font-size:6px!important;}
}


/* Rev.2: refinamiento exclusivo de smartphone. */
@media (max-width:767px){
  .controls-module .module-title{display:none!important;}
  .pipol-player-shell.is-bottom{height:194px!important;min-height:194px!important;}
  .pipol-rack{height:188px!important;min-height:188px!important;grid-template-rows:78px 102px!important;}
  .display-module{height:78px!important;min-height:78px!important;}
  .crt-display{height:68px!important;min-height:68px!important;}
  .controls-module,.plus-module.feature-module{height:102px!important;min-height:102px!important;}
  .controls-module{padding:3px!important;}
  .transport-grid{height:96px!important;grid-template-rows:repeat(2,46px)!important;gap:3px!important;}
  .controls-module .metal-button{height:40px!important;min-height:40px!important;max-width:52px!important;width:100%!important;justify-self:center!important;border-radius:4px!important;}
  .controls-module .metal-button small{font-size:5.5px!important;height:9px!important;line-height:9px!important;}
  .controls-module .metal-button::before{top:10px!important;height:19px!important;left:6px!important;right:6px!important;}
  .controls-module .metal-button::after{top:11px!important;height:6px!important;left:8px!important;right:8px!important;}
  .controls-module .metal-button .icon{top:14px!important;transform:scale(.56)!important;}
  .controls-module .metal-button .stop{top:15px!important;}
  .controls-module .metal-button .speaker{top:14px!important;}
  .controls-module .metal-button .led{bottom:2px!important;width:5px!important;height:5px!important;}
  .plus-module.feature-module{grid-template-rows:14px repeat(2,39px)!important;gap:3px!important;padding:3px!important;}
  .plus-module .module-title{height:14px!important;line-height:14px!important;font-size:7px!important;}
  .plus-module .feature-btn{height:36px!important;min-height:36px!important;max-width:58px!important;width:100%!important;justify-self:center!important;padding:1px 2px!important;font-size:6px!important;border-radius:4px!important;}
  #shareBtn{font-size:5.7px!important;line-height:1!important;}
}