.areaColapsable {
   position: relative;
}

div[class="areaColapsable"] input[type="checkbox"] {
   display: none;
}

.labelControlToggleColapsable {
   display: block;
   font-weight: bold;
   text-align: right;
   font-size: 1rem;
   text-align: center;
   padding: 0;
   background-color: var(--colorParaFondoControles);
   color: var(--colorParaTextoControles);
   cursor: pointer;
   border-radius: var(--borderRadiusLabel);
   transition: all 0.25s ease-out;
}

   .labelControlToggleColapsable:hover {
      background-color: var(--colorParaFondoControlesHover);
   }

   /*se pinta el chevron en estadi colapsado*/
   .labelControlToggleColapsable::before {
      content: ' ';
      display: inline-block;
      border-top: .7rem solid transparent;
      border-bottom: .7rem solid transparent;
      border-left: .7rem solid var(--colorParaTextoControles);
      vertical-align: middle;
      margin-right: .3rem;
      transform: translateY(-.15rem);
      transition: transform .2s ease-out;
   }

.textBoxToggleColapsable:checked + .labelControlToggleColapsable::before {
   transform: rotate(90deg) translateX(-.15rem);
}

.contenidoColapsable {
   position: relative;
   max-height: 0;
   max-width: 0;
   overflow: hidden;
   transition: max-height .25s ease-in-out;
}

.textBoxToggleColapsable:checked + .labelControlToggleColapsable + .contenidoColapsable {
   position: fixed;
   width: max-content;
   max-width: 100%;
   height: 30vh;
   max-height: 50vh;
   overflow: visible;
}

.textBoxToggleColapsable:checked + .labelControlToggleColapsable {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
}