:root{
  --color-default:rgba(155, 155, 155, 0.06);
  --color-second:#0067ac;
  --color-white:#fff;
  --color-body:#e4e9f7;
  --color-light:#e0e0e0;
}

 .conteil{
  position: relative;
  min-height:100vh;
  width: 95%;
  left: 2.5%;
  }
.sidebar{
  height: auto;
  width: 0px;
  z-index: 99;
  background: transparent;
  background-image: linear-gradient(rgb(240, 248, 255) .7px, transparent 0),
  linear-gradient(90deg, rgb(240, 248, 255) .7px, transparent 0);
  linear-gradient(rgb(255, 255, 224) 1px, transparent 0),
  linear-gradient(90deg, rgb(255, 255, 224) 1px, transparent 0);
  background-size: 3px 3px, 3px 3px, 10px 10px, 10px 10px;
  border-radius: 0.3em;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  transition: all .5s ease;
  position: relative;
  top: 3px;
  left: 3px;  
}
.sidebar.open{
  width: 250px; /* 250 */
  border:.7px solid #faf7f0;
}
.sidebar .logo{
  height: 50px;
  display: flex;
  align-items: center;
  position: relative;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  opacity: 0;
  transition: all .5s ease;
  align-items: center;
  text-align: center;
  justify-content: center; 
  align-content: center;
}
.sidebar.open,
.sidebar.open .logo{
  opacity: 1;
}
.myedon{color: red; font-size: 1.10rem;}
/*.toggle {
  position: absolute;
  background-color: red;
  width: 30px;
  height: 30px;
  float:left;
  display: flex!important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.1em;
  transition: all .5s ease;
  gap: 8px;
  cursor: pointer;
  opacity: 0.8;
}
.toggle::before{content:'';
width: 100%;
height: 15px;
position:absolute;
display:block;
top:0px;
background:#00000030;
border-top-left-radius:0.1em;
border-top-right-radius:0.1em;
z-index:1;
opacity:0.7;
}
.toggle span {width: 30px; height: 3px; background-color: #FFF; 
transition: all 0.3s linear;}
.toggle.active span:nth-last-child(1){transform: translateY(-11px) rotate(-45deg);}
.toggle.active span:nth-last-child(2){opacity: 0;}
.toggle.active span:nth-last-child(3){transform: translateY(11px) rotate(45deg);}
*/
.sidebar .nav-list{
  position: relative;
  align-items: center;
  height: auto;
}
#pg0, #pg1, #pg2, #pg3, #pg4, #pg5, #pg6, #pg7, #pg8, #pg9, #pg10{
border-radius:0.3em;
}


 .sidebar li a{
  display: flex;
  height: auto;
  width: 60%;
  margin-left: 10%;
  flex-direction: column;
  list-style: none;
  list-style-type:none;
  text-decoration: none;
  background-color: rgba(192, 192, 192, 0.9);
  border-radius: 0.3em;
  background-blend-mode:normal;
  font-size: 1.10rem;
  font-weight: 600;
  color:#000;
  align-items: center;
  text-align: center;
  justify-content: center; 
  align-content: center;
  position: relative;
  transition: all .5s ease;
  text-shadow:0 4px 2px rgba(255,255,255,.9);
  z-index: 12;
}

.sidebar li a::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  background-color: var(--color-white);
  border-radius: 0.3em;
  transition: transform 0.3s ease-in-out;
  transform-origin: left;
  z-index: -2;
}

.sidebar li a::before{
content:'';
width: 100%;
height: 20px;
position:absolute;
display:block;
top:0px;
background:#00000061;
border-top-left-radius:0.3em;
border-top-right-radius:0.3em;
z-index:12;
opacity:0.7;
}
.sidebar li a:hover::after{
  transform: scaleX(1);
  color:var(--color-default)
}

.sidebar li a .link_name{
  color: #000;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  pointer-events: auto;
  transition: all 0.4s ease;
  pointer-events: none;
  opacity: 0;
}

.sidebar li a:hover .link_name,
.sidebar li a:hover {
  transition: all 0.5s ease;
  color: #000;
}

.sidebar.open li a .link_name{
  opacity: 1;
  pointer-events: auto;
  justify-content: center;
  align-items: center;
}

.sidebar li{
  line-height: 35px; 
  /*margin-top:8px;*/
  padding: 4px 0px;
  font-size: 18px;
  border-radius: 5px;
  list-style: none;
  list-style-type:none;
  text-decoration: none;
  justify-content: center;
  align-items: center;
}

.home-section{
  position: absolute;
  background-color: #FFF;
  height: auto;
  /*min-height: 100vh;*/
  top:3px;
  left:0; /*left:65px, width: calc(100% - 65px); */
  width: 100%;
  transition: all .3s ease;
  z-index: 2;
}

.home-section .text{
  display: block;
  color: #000;
  font-weight: 500;
}

.sidebar.open ~ .home-section{
  left: 0; /*no es -250px, abajo no es width: calc(100% + 250px); es  flex por .sidebar.open*/
  width: 100%;
}