/* PEKE360_UI_REPAIR_V9
 * Encabezado continuo, barra secundaria fija y galeria de producto acotada.
 */

@media (min-width:901px){
  html,
  body,
  #appRoot{
    margin:0!important;
    padding:0!important;
  }

  #appRoot>#mainSidebar{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:sticky!important;
    top:0!important;
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    overflow:visible!important;
    pointer-events:auto!important;
    margin:0!important;
    z-index:70000!important;
  }

  body:has(#page-social-sales-v3.active) #appRoot>#mainSidebar>.vertical-nav{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:static!important;
    width:auto!important;
    height:58px!important;
    min-height:58px!important;
    overflow:visible!important;
    pointer-events:auto!important;
    flex:1 1 auto!important;
    align-items:stretch!important;
  }

  body:has(#page-social-sales-v3.active) #appRoot>#mainSidebar>.vertical-nav>.top-menu-group:not([hidden]),
  body:has(#page-social-sales-v3.active) #appRoot>#mainSidebar>.vertical-nav>.navbtn:not([hidden]),
  body:has(#page-social-sales-v3.active) #appRoot>#mainSidebar>.vertical-nav>.nav-section:not([hidden]){
    visibility:visible!important;
    opacity:1!important;
  }

  #appRoot.sidebar-collapsed>#mainSidebar>.vertical-nav .nav-label,
  #appRoot.sidebar-collapsed>#mainSidebar>.vertical-nav .menu-chevron{
    display:inline!important;
    visibility:visible!important;
    opacity:1!important;
    width:auto!important;
    height:auto!important;
    overflow:visible!important;
  }

  #appRoot.sidebar-collapsed>#mainSidebar>.vertical-nav>.top-menu-group:not([hidden]),
  #appRoot.sidebar-collapsed>#mainSidebar>.vertical-nav>.navbtn:not([hidden]),
  #appRoot.sidebar-collapsed>#mainSidebar>.vertical-nav>.nav-section:not([hidden]){
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
  }

  #appRoot>.content{
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  #appRoot>.content>.topbar{
    position:sticky!important;
    top:58px!important;
    margin:0!important;
    z-index:69990!important;
  }
}

#page-social-sales-v3 #p360SocialChannelFiltersV2{
  display:none!important;
}

#productProfilePhotosSection{
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}

#productProfilePhotosSection .p360-product-gallery{
  display:grid!important;
  grid-template-columns:160px minmax(0,1fr)!important;
  align-items:start!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}

#productProfilePhotosSection #productProfilePhotoMain,
#productProfilePhotosSection .p360-product-gallery-main{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:160px!important;
  height:160px!important;
  min-width:160px!important;
  min-height:160px!important;
  max-width:160px!important;
  max-height:160px!important;
  margin:0!important;
  padding:6px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

#productProfilePhotosSection #productProfilePhotoMain>img,
#productProfilePhotosSection .p360-product-gallery-main>img{
  display:block!important;
  width:148px!important;
  height:148px!important;
  min-width:0!important;
  min-height:0!important;
  max-width:148px!important;
  max-height:148px!important;
  margin:auto!important;
  object-fit:contain!important;
  position:static!important;
  transform:none!important;
}

#productProfilePhotosSection #productProfilePhotoThumbs,
#productProfilePhotosSection .p360-product-gallery-thumbs{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,54px)!important;
  gap:6px!important;
  width:100%!important;
  max-width:100%!important;
  max-height:160px!important;
  margin:0!important;
  overflow:auto!important;
}

#productProfilePhotosSection #productProfilePhotoThumbs:empty{
  display:none!important;
}

#productProfilePhotosSection .p360-product-gallery-thumb{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  max-width:54px!important;
  max-height:54px!important;
  padding:3px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

#productProfilePhotosSection .p360-product-gallery-thumb img{
  display:block!important;
  width:46px!important;
  height:46px!important;
  min-width:0!important;
  min-height:0!important;
  max-width:46px!important;
  max-height:46px!important;
  object-fit:cover!important;
}

#page-social-sales-v3 #p360SocialAdministrationButtonV21{
  position:relative!important;
  z-index:20!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}

@media (max-width:700px){
  #productProfilePhotosSection .p360-product-gallery{
    grid-template-columns:120px minmax(0,1fr)!important;
  }

  #productProfilePhotosSection #productProfilePhotoMain,
  #productProfilePhotosSection .p360-product-gallery-main{
    width:120px!important;
    height:120px!important;
    min-width:120px!important;
    min-height:120px!important;
    max-width:120px!important;
    max-height:120px!important;
  }

  #productProfilePhotosSection #productProfilePhotoMain>img,
  #productProfilePhotosSection .p360-product-gallery-main>img{
    width:108px!important;
    height:108px!important;
    max-width:108px!important;
    max-height:108px!important;
  }
}

/* V12: los botones superiores ya existen y son clicables; se restaura su texto. */
html body #appRoot #mainSidebar > .vertical-nav > .top-menu-group > .nav-section > .nav-label,
html body #appRoot #mainSidebar > .vertical-nav > .top-menu-group > .navbtn > .nav-label,
html body #appRoot #mainSidebar > .vertical-nav > .nav-section > .nav-label,
html body #appRoot #mainSidebar > .vertical-nav > .navbtn > .nav-label{
  display:inline-block!important;
  visibility:visible!important;
  opacity:1!important;
  position:static!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  overflow:visible!important;
  clip:auto!important;
  clip-path:none!important;
  transform:none!important;
  color:inherit!important;
  font-size:13px!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  text-indent:0!important;
  white-space:nowrap!important;
}

html body #appRoot #mainSidebar > .vertical-nav .menu-chevron{
  display:inline-block!important;
  visibility:visible!important;
  opacity:1!important;
  position:static!important;
  width:auto!important;
  height:auto!important;
  overflow:visible!important;
  clip:auto!important;
  clip-path:none!important;
  transform:none!important;
  color:inherit!important;
}
