/* Pirela Group ERP 1.0.9
   Navegación ligera, colorida y colapsable inspirada en herramientas de trabajo modernas. */

.command-center{
  --pg-sidebar-expanded:220px;
  --pg-sidebar-compact:72px;
  --pg-sidebar-current:var(--pg-sidebar-expanded);
  --pg-shell-bg:#f6f7fb;
  --pg-sidebar-bg:#fbfbfe;
  --pg-sidebar-line:#e6e8ef;
  --pg-ink:#323338;
  --pg-muted:#676879;
  --pg-lime:#c8ff00;
  --pg-blue:#579bfc;
  --pg-green:#00c875;
  --pg-yellow:#fdab3d;
  --pg-red:#e2445c;
  --pg-purple:#a25ddc;
  --pg-aqua:#00a9ff;
  min-height:100vh!important;
  padding-left:var(--pg-sidebar-current)!important;
  padding-top:64px!important;
  background:var(--pg-shell-bg)!important;
  transition:padding-left .24s cubic-bezier(.2,.8,.2,1)!important;
}

.command-center.sidebar-collapsed{
  --pg-sidebar-current:var(--pg-sidebar-compact);
  padding-left:var(--pg-sidebar-current)!important;
}

.command-center .main-nav,
.command-center.sidebar-collapsed .main-nav{
  position:fixed!important;
  inset:0 auto 0 0!important;
  width:var(--pg-sidebar-current)!important;
  padding:14px 10px 16px!important;
  display:flex!important;
  flex-direction:column!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  transform:none!important;
  overflow:hidden!important;
  color:var(--pg-ink)!important;
  background:
    radial-gradient(circle at 15% 4%,rgba(200,255,0,.14),transparent 18%),
    linear-gradient(180deg,#ffffff 0%,var(--pg-sidebar-bg) 100%)!important;
  border-right:1px solid var(--pg-sidebar-line)!important;
  box-shadow:8px 0 28px rgba(39,43,68,.045)!important;
  transition:width .24s cubic-bezier(.2,.8,.2,1),transform .24s cubic-bezier(.2,.8,.2,1)!important;
  z-index:85!important;
}

.command-center .sidebar-brand{
  min-height:48px!important;
  height:48px!important;
  padding:0 7px 12px!important;
  margin:0 0 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  border-bottom:1px solid var(--pg-sidebar-line)!important;
  overflow:hidden!important;
}

.command-center .sidebar-brand img{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  padding:3px!important;
  border-radius:10px!important;
  object-fit:contain!important;
  background:#070807!important;
  box-shadow:0 6px 16px rgba(50,51,56,.12)!important;
}

.command-center .sidebar-brand>div{
  display:none!important;
}

.command-center .sidebar-brand strong{
  display:block!important;
  max-width:145px!important;
  overflow:hidden!important;
  color:var(--pg-ink)!important;
  font-size:13px!important;
  font-weight:750!important;
  letter-spacing:-.02em!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.command-center .sidebar-brand span{
  display:block!important;
  margin-top:2px!important;
  color:#9697a4!important;
  font-size:8px!important;
  font-weight:700!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}

.command-center .sidebar-nav-scroll{
  flex:1!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding:0 2px 18px 0!important;
  -ms-overflow-style:none!important;
  scrollbar-width:none!important;
}

.command-center .sidebar-nav-scroll::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
  background:transparent!important;
}
.command-center .sidebar-nav-group{--pg-group:var(--pg-blue);margin:0 0 13px!important}
.command-center .sidebar-nav-group:nth-child(2){--pg-group:var(--pg-purple)}
.command-center .sidebar-nav-group:nth-child(3){--pg-group:var(--pg-green)}
.command-center .sidebar-nav-group:nth-child(4){--pg-group:var(--pg-yellow)}

.command-center .sidebar-nav-label{
  margin:0 0 5px!important;
  padding:0 9px!important;
  color:#8b8c99!important;
  font-size:8px!important;
  font-weight:800!important;
  letter-spacing:.12em!important;
  line-height:20px!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  transition:opacity .14s ease!important;
}

.command-center .main-nav .nav-item{
  position:relative!important;
  width:100%!important;
  min-height:38px!important;
  height:38px!important;
  margin:0 0 3px!important;
  padding:0 9px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#5d5e6c!important;
  font-size:11px!important;
  font-weight:560!important;
  text-align:left!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  transition:background .16s ease,color .16s ease,transform .16s ease!important;
}

.command-center .main-nav .nav-item i{
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  background:color-mix(in srgb,var(--pg-group) 14%,#fff)!important;
  color:color-mix(in srgb,var(--pg-group) 82%,#333)!important;
  font-size:15px!important;
  transition:background .16s ease,color .16s ease,transform .16s ease!important;
}

.command-center .main-nav .nav-item span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  transition:opacity .14s ease,transform .2s ease!important;
}

.command-center .main-nav .nav-item:hover{
  background:color-mix(in srgb,var(--pg-group) 9%,#fff)!important;
  color:var(--pg-ink)!important;
  transform:translateX(2px)!important;
}

.command-center .main-nav .nav-item:hover i{transform:scale(1.04)!important}

.command-center .main-nav .nav-item.active,
body.tenant-branded.pirela-company-workspace .command-center .main-nav .nav-item.active{
  background:color-mix(in srgb,var(--pg-group) 14%,#fff)!important;
  color:var(--pg-ink)!important;
  font-weight:730!important;
  box-shadow:inset 3px 0 0 var(--pg-group)!important;
}

.command-center .main-nav .nav-item.active i{
  background:var(--pg-group)!important;
  color:#fff!important;
  box-shadow:0 5px 12px color-mix(in srgb,var(--pg-group) 25%,transparent)!important;
}

.command-center .topbar,
.command-center.sidebar-collapsed .topbar{
  left:var(--pg-sidebar-current)!important;
  height:64px!important;
  padding:0 22px!important;
  background:rgba(255,255,255,.92)!important;
  border-bottom:1px solid #e8e9ef!important;
  box-shadow:0 4px 18px rgba(39,43,68,.025)!important;
  backdrop-filter:blur(18px)!important;
  transition:left .24s cubic-bezier(.2,.8,.2,1)!important;
}

.command-center .sidebar-toggle,
.command-center.sidebar-collapsed .sidebar-toggle{
  position:fixed!important;
  top:18px!important;
  /* La barra superior crea un containing block por su backdrop-filter. */
  left:-14px!important;
  z-index:98!important;
  width:28px!important;
  height:28px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #dfe1e9!important;
  border-radius:50%!important;
  background:#fff!important;
  color:#555866!important;
  box-shadow:0 4px 12px rgba(39,43,68,.12)!important;
  cursor:pointer!important;
  transition:left .24s cubic-bezier(.2,.8,.2,1),background .16s ease,color .16s ease,transform .16s ease!important;
}

.command-center .sidebar-toggle:hover{
  background:var(--pg-purple)!important;
  border-color:var(--pg-purple)!important;
  color:#fff!important;
  transform:scale(1.07)!important;
}

.command-center .sidebar-toggle span{display:none!important}
.command-center .sidebar-toggle::before{
  content:""!important;
  width:7px!important;
  height:7px!important;
  border-left:2px solid currentColor!important;
  border-bottom:2px solid currentColor!important;
  transform:translateX(1px) rotate(45deg)!important;
  transition:transform .2s ease!important;
}

.command-center.sidebar-collapsed .sidebar-toggle::before{
  transform:translateX(-1px) rotate(225deg)!important;
}

.command-center .workspace,
.command-center.sidebar-collapsed .workspace{
  width:auto!important;
  max-width:1560px!important;
  margin:0 auto!important;
  padding:26px 28px!important;
  background:transparent!important;
  transition:padding .2s ease!important;
}

.command-center.sidebar-collapsed .sidebar-brand{
  justify-content:center!important;
  padding-left:0!important;
  padding-right:0!important;
}

.command-center.sidebar-collapsed .sidebar-brand>div,
.command-center.sidebar-collapsed .sidebar-nav-label,
.command-center.sidebar-collapsed .main-nav .nav-item span{
  width:0!important;
  max-width:0!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:translateX(-6px)!important;
}

.command-center.sidebar-collapsed .sidebar-nav-group{margin-bottom:8px!important}
.command-center.sidebar-collapsed .main-nav .nav-item{
  width:44px!important;
  margin:0 auto 5px!important;
  padding:0!important;
  justify-content:center!important;
  gap:0!important;
  overflow:visible!important;
}

.command-center.sidebar-collapsed .main-nav .nav-item:hover{transform:none!important}
.command-center.sidebar-collapsed .main-nav .nav-item i{width:30px!important;height:30px!important;min-width:30px!important}
.command-center.sidebar-collapsed .main-nav .nav-item.active{box-shadow:inset 3px 0 0 var(--pg-group)!important}

/* El modo oscuro conserva contraste, sin convertir todo el producto en negro. */
body.dark-mode .command-center{
  --pg-shell-bg:#171821;
  --pg-sidebar-bg:#20212b;
  --pg-sidebar-line:#30313d;
  --pg-ink:#f2f2f6;
  --pg-muted:#b7b8c4;
  background:var(--pg-shell-bg)!important;
}
body.dark-mode .command-center .main-nav,
body.dark-mode .command-center.sidebar-collapsed .main-nav{
  background:radial-gradient(circle at 15% 4%,rgba(200,255,0,.09),transparent 18%),linear-gradient(180deg,#23242e,#1d1e27)!important;
  border-color:var(--pg-sidebar-line)!important;
}
body.dark-mode .command-center .sidebar-brand{border-color:var(--pg-sidebar-line)!important}
body.dark-mode .command-center .sidebar-brand strong{color:#f2f2f6!important}
body.dark-mode .command-center .main-nav .nav-item{color:#b7b8c4!important}
body.dark-mode .command-center .main-nav .nav-item:hover,
body.dark-mode .command-center .main-nav .nav-item.active{
  background:color-mix(in srgb,var(--pg-group) 18%,#252630)!important;
  color:#fff!important;
}
body.dark-mode .command-center .main-nav .nav-item i{background:color-mix(in srgb,var(--pg-group) 22%,#252630)!important}
body.dark-mode .command-center .topbar{background:rgba(31,32,41,.93)!important;border-color:#30313d!important}
body.dark-mode .command-center .sidebar-toggle{background:#2a2b35!important;border-color:#3a3b47!important;color:#fff!important}

@media (max-width:1100px) and (min-width:821px){
  .command-center{--pg-sidebar-expanded:208px!important}
}

@media (max-width:820px){
  .command-center,
  .command-center.sidebar-collapsed{
    --pg-sidebar-current:0px!important;
    padding-left:0!important;
    padding-top:60px!important;
  }

  .command-center .topbar,
  .command-center.sidebar-collapsed .topbar{
    left:0!important;
    height:60px!important;
    padding:0 12px 0 48px!important;
  }

  .command-center .main-nav,
  .command-center.sidebar-collapsed .main-nav{
    width:min(282px,calc(100vw - 44px))!important;
    transform:translateX(-105%)!important;
    padding:14px 10px 16px!important;
    box-shadow:18px 0 45px rgba(30,32,50,.18)!important;
  }

  .command-center.sidebar-expanded .main-nav,
  .command-center:not(.sidebar-collapsed) .main-nav{transform:translateX(0)!important}

  .command-center .sidebar-toggle,
  .command-center.sidebar-collapsed .sidebar-toggle{
    position:fixed!important;
    top:16px!important;
    left:12px!important;
    width:28px!important;
    height:28px!important;
    border-radius:8px!important;
  }

  .command-center .sidebar-toggle::before,
  .command-center.sidebar-collapsed .sidebar-toggle::before{
    width:14px!important;
    height:10px!important;
    border:0!important;
    border-top:2px solid currentColor!important;
    border-bottom:2px solid currentColor!important;
    transform:none!important;
  }

  .command-center .sidebar-brand{justify-content:center!important;padding:0 7px 12px!important}
  .command-center .sidebar-brand>div,
  .command-center .sidebar-nav-label,
  .command-center .main-nav .nav-item span,
  .command-center.sidebar-collapsed .sidebar-brand>div,
  .command-center.sidebar-collapsed .sidebar-nav-label,
  .command-center.sidebar-collapsed .main-nav .nav-item span{
    width:auto!important;
    max-width:none!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:none!important;
  }

  .command-center .main-nav .nav-item,
  .command-center.sidebar-collapsed .main-nav .nav-item{
    width:100%!important;
    margin:0 0 3px!important;
    padding:0 9px!important;
    justify-content:flex-start!important;
    gap:9px!important;
    overflow:hidden!important;
  }

  .command-center .sidebar-nav-group,
  .command-center.sidebar-collapsed .sidebar-nav-group{margin:0 0 13px!important}
  .command-center .workspace,
  .command-center.sidebar-collapsed .workspace{padding:18px 12px!important}
}

@media (prefers-reduced-motion:reduce){
  .command-center,
  .command-center *,
  .command-center *::before,
  .command-center *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
}