.barraColapsableCentral {
   background-color: var(--colorParaFondoPagina3);
   color: var(--colorParaTextoPagina);
   border-radius: var(--borderRadiusBarraColapsable);
   min-width: 50%;
   width: 50%;
   max-width: 50%;
   padding: 0;
}

.barraColapsableGeneralesFija {
   align-content: start;
   align-items: start;
   background-color: var(--colorParaFondoPagina3);
   color: var(--colorParaTextoPagina);
   display: flex;
   flex-direction: row;
   height: max-content;
   justify-content: center;
   margin-bottom: .5vh;
   min-width: 100%;
   width: 100%;
   max-width: 100%;
   padding: 0;
}

.barraColapsableFija {
   align-content: start;
   align-items: start;
   background-color: var(--colorParaFondoPagina3);
   color: var(--colorParaTextoPagina);
   display: flex;
   flex-direction: row;
   height: auto;
   justify-content: center;
   margin-bottom: .5vh;
   min-width: 100%;
   padding: 0;
   width: 100%;
}

/*para paginas con barra colapsable, con un boton que colapsa/abre la barra colapsable, pero cualquier postBack */
/*la deja en el estado inicial, podria servir por ejemplo para una barra de ayudas*/
.divConBarraColapsable {
   display: flex;
   flex-direction: column;
   max-width: 100%;
   min-width: 100%;
   position: relative;
   width: 100%;
}

.barraColapsable {
   align-content: center;
   align-items: center;
   border: var(--bordeGeneral);
   display: flex;
   flex-direction: row;
   justify-content: center;
   width: 100%;
}

label[for="expandirContraerBarraColapsable"]:after {
   content: "Abrir barra de selección";
   width: auto;
}

#expandirContraerBarraColapsable:checked ~ label[for="expandirContraerBarraColapsable"]:after {
   content: "Cerrar barra de selección";
   width: auto;
}

/*inicialmente barraColapsable esta expandida*/
.barraColapsableGenerales {
   align-content: center;
   background-color: var(--colorParaFondoControles);
   color: var(--colorParaTextoControles);
   border: var(--bordeGeneral);
   display: flex;
   flex-direction: row;
   font-size: 1.2rem;
   height: auto;
   justify-content: center;
   padding: 0;
   text-align: center;
   width: 100%;
}

/*inicialmente barraColapsable esta colapsada*/
.barraColapsable-1 {
   background-color: var(--colorParaFondoControles);
   color: var(--colorParaTextoControles);
   display: none;
   height: 0;
   width: 0;
}

#expandirContraerBarraColapsable:checked ~ .barraColapsableGenerales {
   display: none;
   height: 0;
   width: 0;
}

#expandirContraerBarraColapsable:checked ~ .barraColapsable-1 {
   display: flex;
   height: auto;
   width: 100%;
}

/**
   * checkbox abre/cierra la barra colapsable
   */
#expandirContraerBarraColapsable {
   display: none;
}

label[for="expandirContraerBarraColapsable"] {
   cursor: pointer;
   font-size: .7rem;
   padding: 0;
   text-align: start;
   text-align: center;
   width: auto;
}